動態偵聽Backbone.js視圖的渲染函數被調用

Question

我想動態地擴展Backbone.js視圖的渲染函數。這樣做，我希望能夠在調用render之前和之後觸發事件。我嘗試覆蓋該函數並調用舊函數，該函數可以工作，但所有綁定到渲染函數的模型都會失去綁定。我現在已經是下面的代碼，是我傳遞一個Backbone.js的創建視圖：

function bindRenders(view) { 

    view.render = (function() { 
     var cachedRender = view.render; 

     return function() { 
      console.log("before render"); 
      cachedRender.apply(this, arguments); 
      console.log("after render"); 
     }; 
    }()); 
} 

再次，上面的代碼將工作，但被綁定到渲染功能的所有型號：

this.model.on('change', this.render, this); 

break。我找到的唯一解決方案是在覆蓋函數後重新綁定模型的.on（'change'）事件。但是，並不是每個視圖的模型都會以這種方式進行綁定。很感謝任何形式的幫助！謝謝！

Answer 1

你是什麼意思'break'？當模型改變時，你以前的渲染代碼仍然被調用？

這是因爲綁定到「更改」事件的函數不是您的新函數，您只需更改視圖的屬性「渲染」，而不是更改時執行的內容。 我想這會工作，如果你的綁定是：this.model.on('change', function(){return this.render()}, this)

但我看不出爲什麼你會想這樣。在我看來，你應該使用繼承來應用這種常見的行爲。

喜歡的東西（大大簡化）

var MyBaseView = Backbone.View.extend({ 
    ... 
    render: function(){ 
    this.trigger('beforeRender'); 
    this.beforeRender() 

    //do something generic 
    ... 

    this.afterRender() 
    this.trigger('afterRender'); 
    } 
    ... 
}); 

var MyOtherView = MyBaseView.extend({ 
    ... 
    beforeRender: function(){ 
    //do something specific 
    } 

    //do NOT override "render" 

    afterRender: function(){ 
    //do some other specific things 
    } 
    ... 
}); 

或者這樣一個Backbone.js view inheritance

一個更好的解決方案而且我想，https://github.com/tbranyen/backbone.layoutmanager有很多你想要達到的目標。