view.render()完成后的Backbone.js事件

Question

有人知道在backbone.js中渲染视图后会触发哪个事件吗？

Answer 1

我看到了这篇文章，它似乎很有趣

var myView = Backbone.View.extend({ 
    initialize: function(options) { 
        _.bindAll(this, 'beforeRender', 'render', 'afterRender'); 
        var _this = this; 
        this.render = _.wrap(this.render, function(render) { 
            _this.beforeRender(); 
            render(); 
            _this.afterRender(); 
            return _this; 
        }); 
    }, 
    beforeRender: function() { 
       console.log('beforeRender'); 
    }, 
    render: function() { 
        return this; 
    }, 
    afterRender: function() { 
        console.log('afterRender'); 
    } 
});

Answer 2

或者您可以执行以下操作，这就是Backbone代码的外观（Observer模式，又名pub/sub）。这就是前进的道路：

var myView = Backbone.View.extend({ 
    initialize: function() {  
        this.on('render', this.afterRender);
        this.render();
    },
    render: function () {  
        this.trigger('render');
    },
    afterRender: function () {
    }
});

编辑：this.on('render', 'afterRender');将不起作用，因为Backbone.Events.on只接受函数。Backbone.View.delegateEvents使.on('event', 'methodName');魔术成为可能，因此仅在DOM事件中可用。

Answer 3

据我所知，没有人被解雇。源代码中的Render函数为空。

render的默认实现是无操作

我建议在必要时手动触发它。

Answer 4

如果您碰巧正在使用Marionette，Marionette会在视图中添加show和render事件。有关示例，请参阅此StackOverflow问题。

附带说明一下，Marionette添加了许多您可能感兴趣的其他有用功能。

Answer 5

我意识到这个问题已经很老了，但我想要一个解决方案，允许在每次调用render后调用相同的自定义函数，所以我想出了以下。。。

首先，覆盖默认的主干render功能：

var render = Backbone.View.prototype.render;
Backbone.View.prototype.render = function() {
    this.customRender();
    afterPageRender();
    render();
};

上面的代码在视图上调用customRender，然后调用通用自定义函数（afterPageRender），然后调用原始Backbone render函数。

然后，在我的视图中，我用customRender:替换了render函数的所有实例

initialize: function() {
    this.listenTo(this.model, 'sync', this.render);
    this.model.fetch();
},
customRender: function() {
    // ... do what you usually do in render()
}

Answer 6

您也可以将事件添加到视图的"events"部分，而不是手动添加事件处理程序以在初始化时进行渲染。看见http://backbonejs.org/#View-delegateEvents

例如

events: {
   'render': 'afterRender'
}
afterRender: function(e){
    alert("render complete")
},

Answer 7

 constructor: function(){
   Backbone.View.call(this, arguments);     
   var oldRender = this.render
   this.render = function(){
      oldRender.call(this)
      // this.model.trigger('xxxxxxxxx')
   }       
 }

像这样http://jsfiddle.net/8hQyB/