backbone.js - 在 Backbone 中创建集合 ListView 的正确方法

Question

我目前正在学习 Backbone.js 并且我很难学习如何正确使用 View (因为我在 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然后将填充 li s 包含集合的数据。我一直在尝试修复/调试这段代码一段时间(至少 3 小时)，但我经常遇到错误或错误的结果，所以请有人向我解释实现这一点的正确方法。

编辑(生成的 HTML) :

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

Answer 1

这里至少存在一个问题:

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

应该

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

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