在view.render()完成后发生Backbone.js事件

oyt4ldly  于 2022-11-10  发布在  其他
关注(0)|答案(7)|浏览(244)

有没有人知道在backbone.js中呈现视图后触发了哪个事件?

eulz3vhy

eulz3vhy1#

我遇到了这个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'); 
    } 
});
tuwxkamq

tuwxkamq2#

或者你也可以做下面的事情,这就是 Backbone.js 代码应该看起来的样子(观察者模式,又名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事件可用。

dw1jzc5e

dw1jzc5e3#

据我所知-没有被激发。渲染函数在源代码中是空的。
render的默认实现是无操作
我建议在必要的时候手动触发它。

scyqe7ek

scyqe7ek4#

如果你使用的是Marionette,Marionette会在视图上添加showrender事件。
顺便说一句,Marionette添加了很多其他有用的功能,您可能会感兴趣。

oiopk7p5

oiopk7p55#

我知道这个问题已经很老了,但是我想要一个解决方案,允许在每次调用render之后调用相同的自定义函数,所以我提出了下面的问题...
首先,覆盖默认的Backbone 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()
}
4sup72z8

4sup72z86#

除了手动添加eventhandler以在初始化时呈现之外,您还可以将事件添加到视图的“events”部分。请参见http://backbonejs.org/#View-delegateEvents
例如:

events: {
   'render': 'afterRender'
}

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

d4so4syb7#

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/

相关问题