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

【问题标题】：After Render Event on CompositeView with Backbone.Marionette使用 Backbone.Marionette 在 CompositeView 上渲染事件之后
【发布时间】：2012-08-30 22:05:08
【问题描述】：

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

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

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

我是这样做的：（但是“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);
    },

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

});

我该怎么做？

===========================编辑==================== ===============

我就是这样解决的，如果你有意见请告诉我。

// 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;         

        }
    }

});

【问题讨论】：

请提供有关您的事件绑定以及何时调用渲染器的更多详细信息
在初始化函数中："this.bindTo(this,'render',this.afterRender)"。我不确定这是否正确，但我想做的是在视图渲染后调用“afterRender”函数

标签： backbone.js marionette

【解决方案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 方法添加逻辑以检查集合是否已呈现。

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

例如...如果您想呈现“No Items Found”消息，您可以为复合视图使用内置的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
    }
  }

});

【讨论】：

感谢您的回答。也许这个：“this.collection.length > 0”应该被“this.collection.length == 0”改变

【解决方案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

【讨论】：