將綁定集合更改爲查看呈現

儘管在StackOverflow和其他地方對此同一主題提出了許多問題/回答，但我仍然不明白如何繼續。我想在我的視圖中更改我的集合以觸發渲染功能。 View有一個集合，而不是一個模型 - 所以我看到的model.bind的很多例子都不適用。顯然，collection.bind不是合法的綁定。這是我的視圖代碼。我應該在initialize中添加什麼，以便當orderedPrefs（collection）發生更改時，視圖的render函數被調用？將綁定集合更改爲查看呈現

headerView = Backbone.View.extend({ 

     el: $('#' + targetdiv), 
     collection: orderedPrefs, 
     events: { 
      "click .scheduleheader": "clicked"        // dependency here on scheduler.js class naming .scheduleheader 

     }, 
     initialize: function() { 
      _.bindAll(this, "render"); 

     }, 
     render: function() { 
      alert('render!!'); 
     },

..... .....

來源

2012-10-23 goldfinger

可以使用collection.on到「添加」和「刪除」事件綁定。有關使用示例，請參閱documentation under Add。

this.collection.on("add", this.render);

如果您使用主幹版本0.9.0或更高版本，那麼你可以在同一個語句綁定多個事件：

this.collection.on("add remove", this.render);

還要注意的是「綁定」應該工作一樣「 on「：

綁定和取消綁定已重命名爲on和off，以便清晰，遵循jQuery的領先。舊名稱也仍然受支持。

來源

2012-10-23 22:46:18 McGarnagle

但是，當我的集合已經加載並且我對基礎模型進行了修改時 - 看起來好像我無法在這種情況下對更改進行綁定？看起來好像我需要綁定到底層模型來捕捉更改（如在，編輯）？ – goldfinger

@goldfinger不，您可以使用「更改」事件通知集合中任何模型的更改。從這裏的文檔開始 - 措辭有點模棱兩可，所以我不能100％確定：*您可以綁定「更改」事件，以便在集合中的任何模型被修改時通知* – McGarnagle

還有一些錯誤我簡直無法理解。 this.collection.bind（「change」，this.render）在JavaScript中給出'對象不支持屬性或方法綁定'的錯誤，這就是爲什麼在OP中我提到collection.bind似乎不是一個合法的綁定。我不知道我的結局有什麼問題...... – goldfinger

這些應該初始化函數內部工作：

this.collection.on("add", this.render); 
this.collection.on("remove", this.render); 
this.collection.on("reset", this.render);

如果他們不這樣做，你有一個問題，附着在視圖中的集合。你不應該使用全局的「orderedPrefs」。

骨幹文檔狀態：

當創建一個新的視圖，你通過選項連接到視圖this.options，以供將來參考。有幾個特殊選項，如果通過，將直接附加到視圖：模型，集合，el，id，className，tagName和屬性。

當實例化視圖，您需要通過這樣的集合：

new headerView({ collection: orderedPrefs });

如果你想跟蹤收集模型的變化，你應該做一個不同的看法：

var ModelView = Backbone.View.extend({ 
    initialize: function() { 
     _.bindAll(this, "render"); 
     this.render(); 
     this.model.on("change",this.render); 
    }, 
    render: function() { 
     $(this.el).html("model view markup"); // you should use templating 
     return this; 
    } 
}); 

var headerView = Backbone.View.extend({ 
    el: $('#' + targetdiv), 
    initialize: function() { 
     _.bindAll(this, "render"); 
     this.collection.on("add", this.render); 
     this.collection.on("remove", this.render); 
     this.collection.on("reset", this.render); 
    }, 
    render: function() { 
     var self = this; 
     this.collection.each(function(collectionModel){ 
      var view = new ModelView({ model : collectionModel }); 
      $(self.el).append(view.el); 
     }); 
    } 
});

來源

2012-10-24 07:26:27

將綁定集合更改爲查看呈現

回答

相關問題