Question

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

Answer 1

我遇到了这个似乎很有趣的post

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仅接受功能。 .on('event', 'methodName');使Backbone.View.delegateEvents魔法成为可能，因此仅适用于DOM事件。

Answer 3

据我所知 - none is fired。渲染函数在源代码中为空。

render的默认实现是no-op

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

Answer 4

如果您正在使用Marionette，Marionette会在视图中添加show和render个事件。有关示例，请参阅this StackOverflow question。

另一方面，Marionette添加了许多您可能感兴趣的其他有用功能。

Answer 5

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

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

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

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

然后，在我看来，我将render函数的所有实例替换为customRender：

initialize: function() {
    this.listenTo(this.model, 'sync', this.render);
    this.model.fetch();
},

customRender: function() {
    // ... do what you usually do in render()
}

Answer 6

除了手动添加事件处理程序以在初始化时渲染，您还可以将事件添加到视图的“事件”部分。见http://backbonejs.org/#View-delegateEvents

e.g。

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/

view.render（）完成后的Backbone.js事件

7 个答案: