5

我目前正在学习 Backbone.js，我很难学习如何正确使用视图（因为我在 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>
4

2 回答 2

4

这里至少存在一个问题：

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

应该

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

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

于 2013-09-17T00:17:16.760 回答
2

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

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

于 2013-09-17T00:11:19.713 回答