骨干视图不创建“自身”

Question

我刚开始学习 Backbone，从目前所见，当您创建视图并定义 tagName 和 className 时，您创建的视图是在该元素内创建的，但它不适用于代码下面，有人可以解释一下为什么吗？我在这上面花了太多时间，我的脑袋都晕了。

var app = {};

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

    app.TodoList = Backbone.Collection.extend({
        model: app.Todo,
        url: '#todolist'
    });

    app.TodoListView = Backbone.View.extend({
        tagName: 'ul',
        className: 'todolist',
        initialize: function() {
            this.template = _.template($('#todolist-template').html());
            this.render();
        },
        render: function() {
            this.$el.empty();
            this.$el.append(this.template({items: this.collection.toJSON()}));
            return this;
        }
    });
    app.todoList = new app.TodoList([
        new app.Todo({
            name: 'unclog the sink',
            priority: '10',
            description: 'FIX THE SINK!!!'
        }),
        new app.Todo({
            name: 'get bread',
            priority: '0',
            description: 'We are out of bread, go get some'
        }),
        new app.Todo({
            name: 'get milk',
            priority: '2',
            description: 'We are out of milk, go get some'
        })
    ]);

    new app.TodoListView({el: $('#container'), collection: app.todoList});
})(jQuery);

模板：

<script type="text/template" id="todolist-template">
    <% _.each(items, function(item){ %>
        <li>
            <%= item.name %>
            <%= item.description %>
            <%= item.priority %>
        </li>
    <%}); %>
</script>

结果：

<div id="container">    
    <li>unclog the sink FIX THE SINK!!! 10</li>
    <li>get bread We are out of bread, go get some 0</li>
    <li>get milk We are out of milk, go get some 2</li> 
</div>

Answer 1

您应该了解View、here 的el 属性。当您指定 tagName 和 className 时，它会创建 DOM 元素 <ul class="todolist"></ul> 但不会将其附加到 DOM。如果该元素已经存在于 DOM 中，您可以将 el 设置为匹配该元素的 CSS 选择器。

因此，在您的情况下，您的模板是在 ul 元素中创建的，但 ul 元素本身并未添加到 DOM 中。

尝试执行以下操作：

注意：div 和 id 作为 container 应该已经存在于 DOM 中。

视图定义：

app.TodoListView = Backbone.View.extend({
        el: '#container',
        initialize: function() {
            this.template = _.template($('#todolist-template').html());
            this.render();
        },
        render: function() {
            this.$el.html(this.template({items: this.collection.toJSON()}));
            return this;
        }
    });

模板：

 <script type="text/template" id="todolist-template">
        <ul class="todolist">
        <% _.each(items, function(item){ %>
            <li>
                <%= item.name %>
                <%= item.description %>
                <%= item.priority %>
            </li>
        <%}); %>
      </ul>
 </script>

视图创建：

new app.TodoListView({collection: app.todoList});

Answer 2

我不是 BackboneJS 方面的专家，但我试图解决这个问题。根据关于 el 属性的backboneJS 文档，它总是在那里呈现主干视图。如果您未指定，则默认元素为 <div>。您已经理解正确，该元素将在其中呈现。 在您的代码中，您将 <div> 元素作为 el 提供，因此在创建新的视图对象时它会覆盖您的 tagName 属性。另一件事是您在创建可能导致问题的对象之前调用渲染。所以根据我的观点，你的代码应该是这样的：

 $("$container").html((new app.TodoListView({collection: app.todoList})).render())