Question

我正在将Backbone.js用于我的项目对不起，我是一个Backbone新手，因此我可能会遗漏一些非常微不足道的东西。

这是一个HTML代码段：

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

这是Backbone代码，它应该在该代码片段中“注入”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代码，因为我觉得它不相关。

我的问题是Backbone呈现的HTML代码如下：

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

基本上Backbone从表中删除了thead 我不明白为什么 - 我如何确保Backbone不会删除它？

Answer 1

您的NoteListView不会在其el之外写任何内容（例如：http://jsfiddle.net/ambiguous/cFvX2/），因此您的问题出在其他地方。

我的猜测是你做了与此相同的事情：

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

这将完全取代#notes表的内容仅包含<tbody>（即NoteListView的{{1}}）。

您可以通过几种方式解决问题。您可以调用el并忽略它返回的内容：

render

这就是我的第一个演示小提琴。

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

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

然后append视图的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; } });到el：

$('#notes')

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

您也可以让来电者指定var v = new App.view.NoteListView; $('#notes').append(v.render().el);：

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

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

虽然我在这里，但您不再需要var v = new App.view.NoteListView({ el: $('#notesTableBody') }); v.render();，最近版本的Backbone会为您的观点提供this.$el：

$ el $(this.el)

视图元素的缓存jQuery（或Zepto）对象。一个方便的引用，而不是一直重新包装DOM元素。

如果您的视图正在包装集合，则应使用view.$el而不是this.collection：

this.model

视图会对collection option specially just like model：

进行处理

构造函数/初始化 new SomeView({ collection: some_collection })

[...]有几个特殊选项，如果通过，将直接附加到视图：new View([options])，model，collection，el， id，className和tagName。

Backbone集合也有several Underscore methods mixed in所以你不需要这样说：

attributes

你可以直接在集合上致电_.each(some_collection.models, function(m) { ... });：

each

此外，如果您绑定到some_collection.each(function(m) { ... });事件：

"reset"

您可能希望this.model.bind("reset", this.render, this);在添加更多内容之前清除render：

el

如果您没有empty render: function() { this.$el.empty(); this.collection.each(function(note) { ... }); }，当您可能想要用新内容替换其内容时，您将添加更多内容。

Backbone - 在表View中保存thead

1 个答案: