骨幹 - 在表中保存thead查看

Question

我正在爲我的項目使用Backbone.js。
對不起，我是骨幹新手，因此我可能會錯過一些非常微不足道的東西。

這是一個HTML片段：

<table id="notes" class="table"> 
    <thead> 
     <tr><th>title</th><th>comment</th></tr> 
    </thead> 
    <tbody id="notesTableBody"> 
    </tbody> 
</table> 

這是骨幹代碼，它應該在片段「注入」 HTML：

App.view.NoteListView = Backbone.View.extend({ 

    el:"tbody#notesTableBody", 

    initialize:function() { 
     this.model.bind("reset", this.render, this); 
    }, 

    render:function (eventName) { 
     _.each(this.model.models, function (note) { 
      $(this.el).append(new App.view.NoteListItemView({model:note}).render().el); 
     }, this); 
     return this; 
    } 

}); 

爲清楚起見，我沒有粘貼NoteListItemView代碼，因爲我認爲它不相關。

我的問題是通過骨幹呈現的HTML代碼如下：

<table id="notes" class="table"> 
    <tbody id="notesTableBody"> 
    <tr><td>title 1</td><td>comment 1</td></tr> 
    </tbody> 
</table> 

基本上骨幹從表中刪除的THEAD。
我不明白爲什麼 - 我如何確保Backbone不會刪除它？

Answer 1

您的NoteListView將不會在el之外寫入任何內容（例如：http://jsfiddle.net/ambiguous/cFvX2/），因此您的問題在別處。

我的猜測是，你正在做一些相同的：

var v = new App.view.NoteListView; 
$('#notes').html(view.render().el); 

，這將完全取代#notes表的內容只是<tbody>（即的elNoteListView）。

有幾個方法可以解決您的問題。你可以只調用render，而忽略它返回什麼：

var v = new App.view.NoteListView; 
v.render(); 

這幾乎是我的第一個演示小提琴做了什麼。

或者你可以使用id and tagName instead of el：

App.view.NoteListView = Backbone.View.extend({ 
    id: 'notesTableBody', 
    tagName: 'tbody', 
    initialize:function() { 
     this.model.bind("reset", this.render, this); 
    }, 
    render:function (eventName) { 
     _.each(this.model.models, function (note) { 
      $(this.el).append(new App.view.NoteListItemView({model:note}).render().el); 
     }, this); 
     return this; 
    } 
}); 

，然後append視圖的el到$('#notes')：

var v = new App.view.NoteListView; 
$('#notes').append(v.render().el); 

演示：http://jsfiddle.net/ambiguous/HTAkM/

你也可以讓調用者指定el：

App.view.NoteListView = Backbone.View.extend({ 
    initialize:function() { 
     this.model.bind("reset", this.render, this); 
    }, 
    render: function(eventName) { 
     _.each(this.model.models, function (note) { 
      $(this.el).append(new App.view.NoteListItemView({model:note}).render().el); 
     }, this); 
     return this; 
    } 
}); 

，然後render爲el，而無需關心render的返回值：

var v = new App.view.NoteListView({ el: $('#notesTableBody') }); 
v.render(); 

演示：http://jsfiddle.net/ambiguous/2Ptkp/

---

雖然我在這裏，你不需要$(this.el)最近版本的Backbone爲您提供了this.$el的意見：

$ ELview.$el

甲緩存jQuery的（或的Zepto）對象視圖的元件。一個方便的參考，而不是一直重新包裝DOM元素。

如果你的看法被包裹的集合，你應該使用this.collection而不是this.model：

new SomeView({ collection: some_collection }) 

查看對待collection option specially just like model：

構造函數/初始化new View([options])

[...] 有即，如果獲得通過，將直接連接到視圖幾個特殊選項：model，collection，el，id，className，tagName和attributes。

骨幹的集合也有several Underscore methods mixed in，所以你不必這樣說：

_.each(some_collection.models, function(m) { ... }); 

你可以打電話each權的集合：

some_collection.each(function(m) { ... }); 

另外，如果你是綁定到"reset"事件：

this.model.bind("reset", this.render, this); 

你可能希望你的render以追加更多的事情之前清除出el：

render: function() { 
    this.$el.empty(); 
    this.collection.each(function(note) { ... }); 
} 

如果不這樣做empty的el你會添加更多的東西出來的時候，你可能意味着更換其內容與新事物。