Question

I am using Backbone.js for my project.
Sorry, I am a Backbone newbie, therefore I may be missing something very trivial.

这是 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;
    }

});

为了清楚起见,我还没有贴上 notelitterView 代码,因为我认为它无关紧要。

我的问题是 Backbone 提供的 HTML 代码如下:

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

Basically Backbone removed the thead from the table.
I don t understand why - how can I make sure Backbone doesn t remove it?

Answer 1

您的 noteListView 将不在其 el 之外写任何文字(例如: http://jsfidle.net/ambiggy/cFvX2/ ),所以您的问题在其他地方。

我猜你是在做类似的事情

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

这将完全替换表格的内容, 仅使用 (即 NoteListView s el )。

您的问题有几种不同的方式。您可以拨打 < code> render , 忽略它返回的内容 :

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

差不多这就是我第一支小提琴的功劳

或者您可以使用 < a href=>" "http://backbonejs.org/#View-el" rel="nofollow"\\"code> >id 和 tagName 而不是 el _/a>:

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;
    }
});

然后""http://api.jquery.com/ append/"rel="nofollow"\\\\\code> suppend

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

网站:http://jsfiddle.net/ambigous/HTAkM/"rel="nofollow">http://jsfiddle.net/ambigy/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 s 返回值:

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

演示:"http://jsfiddle.net/ambigty/2Ptkp/"rel="nofollow">http://jsfiddle.net/ambigty/2Ptkp/

当我在这里的时候,你不再需要 $( this.el) 了, 最近的Backbone版本提供 this.$el 来表达你的观点:

$el view.$el

视图 s 元素的缓存 jQuery (或 Zepto) 对象。一个方便的引用, 而不是随时重新包装 DOM 元素。

如果您的视图正在包扎收藏, 您应该使用 < code> this. recolling 而不是 < code> this. model :

new SomeView({ collection: some_collection })

options 对待 """http://backbonejs.org/#View-constructor" rel="nofollow"\\\code > pollow 选项, 特别和 model 一样:




  <强度 > 构建器/初始化   新视图([选项]) 

  
  [.]如果通过,有些特殊选项将直接附在视图上: model , counting , counting , el , /code>,  className , tagName 和 atritute 。

Backbone收藏也有

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


您可以在收藏中拨打 ach  right:

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


此外,如果您对  “ 重置”  事件重新具有约束力:

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


您可能需要您的  render  来清除 el , 然后再追加更多内容 :

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


如果您不""http://api.jquery.com/stopy/" rel="nofollow"\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

友情链接