Question

我有一个带有搜索面板和结果数据集合的Marionette CompositeView。

我想在以下情况下调用函数：

呈现搜索面板。
尚未呈现该集合。
渲染集合时不应调用此函数。

我是这样做的:(但＆＃34; afterRender＆＃34;函数被调用两次）

// VIEW
App.MyComposite.View = Backbone.Marionette.CompositeView.extend({
    // TEMPLATE
    template: Handlebars.compile(templates.find('#composite-template').html()),
    // ITEM VIEW
    itemView: App.Item.View,
    // ITEM VIEW CONTAINER
    itemViewContainer: '#collection-block',

    //INITIALIZE
    initialize: function() {        
        this.bindTo(this,'render',this.afterRender);
    },

    afterRender: function () {
        //THIS IS EXECUTED TWICE...
    }

});

我该怎么做？

========================== EDIT ==================== ==============

我用这种方式解决了，如果你有观察请告诉我。

// VIEW
App.MyComposite.View = Backbone.Marionette.CompositeView.extend({

    //INITIALIZE
    initialize: function() {        
        //this.bindTo(this,'render',this.afterRender);
        this.firstRender = true;
    },

    onRender: function () {
        if (firstRender) {
            //DO STUFF HERE..............
            this.firstRender = false;         

        }
    }

});

Answer 1

Marionette为其所有视图提供了onRender方法，因此您可以摆脱this.bindTo(this, 'render', this.afterRender)调用：


// VIEW
App.MyComposite.View = Backbone.Marionette.CompositeView.extend({
    // TEMPLATE
    template: Handlebars.compile(templates.find('#composite-template').html()),
    // ITEM VIEW
    itemView: App.Item.View,
    // ITEM VIEW CONTAINER
    itemViewContainer: '#collection-block',

    //INITIALIZE
    initialize: function() {        
        // this.bindTo(this,'render',this.afterRender); // <-- not needed
    },

    onRender: function () {
        // do stuff after it renders, here
    }

});

但是为了让它在不渲染集合时不做工作，你必须为onRender方法添加逻辑，以检查集合是否被渲染。

这在很大程度上取决于当没有从集合中呈现任何项目时，您尝试对渲染进行的操作。

例如......如果要呈现“找不到项目”消息，可以使用内置的emptyView配置作为复合视图。


NoItemsFoundView = ItemView.extend({
  // ...
});

CompositeView.extend({

  emptyView: NoItemsFoundView

});

但是如果你有一些特殊的代码需要运行并执行这个选项未涵盖的某些事情，那么你必须加入一些你自己的逻辑。


CompositeView.extend({

  onRender: function(){
    if (this.collection && this.collection.length === 0) {
      // do stuff here because the collection was not rendered
    }
  }

});

Answer 2

只需使用onShow功能

即可

Backbone.Marionette.ItemView.extend({
  onShow: function(){
    // react to when a view has been shown
  }
});

http://marionettejs.com/docs/marionette.view.html#view-onshow

使用Backbone.Marionette在CompositeView上渲染事件之后

2 个答案: