在 Backbone 中创建集合列表视图的正确方法答案

【问题标题】：Proper way to create a collection list view in Backbone在 Backbone 中创建集合列表视图的正确方法
【发布时间】：2013-09-17 00:00:11
【问题描述】：

我目前正在学习 Backbone.js，我很难学习如何正确使用 Views（因为我在 MVC 方面有过经验），所以这就是我想要做的：

模板：

    <script type="text/template" id="todolist-template">
        <ul></ul>
    </script>
    <script type="text/template" id="todo-template">
        <li>
            <%= item.name %>
            <%= item.description %>
            <%= item.priority %>
        </li>
    </script>

html：

<div id="container"></div>

观看次数：

var TodoView = Backbone.View.extend({
    tagName: 'li',
    className: 'todo',
    initialize: function() {
        this.template = _.template($('#todo-template').html());
        this.render();
    },
    render: function() {
        this.$el.html(this.template({item: this.model}));
        return this;
    }
});

var TodoListView = Backbone.View.extend({
    el: '#container',
    tagName: 'ul',
    className: 'todolist',
    initialize: function() {
        this.template = _.template($('#todolist-template').html());
        this.render();
    },
    render: function() {
        that = this;
        this.$el.empty();
        this.$el.append(this.template());
        this.collection.each(function(model) {
            that.$el.append(new TodoView({model: model.toJSON()}));
        });
        return this;
    }
});

模型和集合：

var Todo = Backbone.Model.extend({
    defaults : {
        name : '',
        priority: '',
        description: ''
    }
});

var TodoList = Backbone.Collection.extend({
    model: Todo
});

var todoList = new app.TodoList([
    new Todo({
        name: 'unclog the sink',
        priority: '10',
        description: 'FIX THE SINK!!!'
    }),
    new Todo({
        name: 'get bread',
        priority: '0',
        description: 'We are out of bread, go get some'
    }),
    new Todo({
        name: 'get milk',
        priority: '2',
        description: 'We are out of milk, go get some'
    })
]);

“杂项”：

$(function() {
    new HeaderView();
    new TodoListView({collection: todoList});
    router = new AppRouter();
    Backbone.history.start();
});

我要做的是创建一个ul，然后将填充包含集合数据的lis。我一直在尝试修复/调试此代码一段时间（至少 3 小时），但我经常遇到错误或错误结果，所以请有人向我解释实现此代码的正确方法。

编辑（生成 HTML）：

<div id="container">
    <ul></ul>
</div>

【问题讨论】：

标签： backbone.js backbone-views

【解决方案1】：

这里至少存在一个问题：

that.$el.append(new TodoView({model: model.toJSON()}));

应该是

that.$el.append(new TodoView({model: model.toJSON()}).render().el);

由于您不能将视图附加到 $el，而是应该附加呈现的 html

【讨论】：

是的，这行得通，但不幸的是，li 元素是在与ul 相同的级别创建的。
另外，如果您对 Backbone 感到满意，我强烈推荐 Marionette.js，如果您打算进行任何大规模的 Backbone 开发。
也按照橙色所说的，因为你的 DOM 结构与你所拥有的不正确。
另外，不知何故ul 没有得到类名“todoList”
我会让你成为小提琴

【解决方案2】：

您的模板中不需要<li>，因为您的视图已经将模板包装在这些标签中。如果它仍然不起作用，请检查 DOM 并将其发布在此处。 <ul>...

另外，我看不到您将 ListView 添加到 DOM 的位置。 render 仅对尚不属于 DOM 的本地元素进行操作。渲染后，您必须将其添加到 DOM。

【讨论】：

这不应该生成ul的HTML并放到DOM中吗？ this.$el.append(this.template());感谢li 的信息，我已经解决了这个问题，但现在lis 是在ul 之外创建的（不知何故也没有得到todoList 的类名）。
this.$el.append(this.template()); 实际上不会将它添加到 DOM 中（它只会将模板附加到它的 $el 上，它还不是 DOM 的一部分）。除此之外，你必须做这样的事情$('body').html(todoList.render().el)。