骨干 - 在表中保存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你会添加更多的东西出来的时候，你可能意味着更换其内容与新事物。