Backbone.js “主干视图不创建”；本身；

我刚开始学习主干，根据我到目前为止所看到的，当你创建一个视图，定义一个标记名和一个类名时，你创建的视图是在这个元素中创建的，但它不能在下面的代码中工作，有人能给我解释一下为什么吗？我在这上面花了太多时间，我的头都快晕过去了

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>

结果：

<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>

打开水槽，修理水槽！！！十,
买面包我们的面包用完了，去买些
买牛奶我们的牛奶用完了，去买些2

我不是BackboneJS方面的专家，但正在尝试解决这个问题。根据关于el属性的文档，它始终存在于渲染主干视图中。如果未指定，则默认元素为

。您理解的没错，该元素将在其中呈现。 在您的代码中，您将

元素作为el提供，因此在创建新的视图对象时，它将覆盖您的标记名属性。另一件事是在创建对象之前调用render，这可能会导致问题。因此，根据我的意见，您的代码应该如下所示：

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

---

您应该了解

视图

的

el

属性。当您指定标记名和类名时，它会创建DOM元素，但不会将其附加到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>

---

所以我需要将make容器更改为

ul

元素？是否有办法将

ul

插入容器

div

？因为我可能在同一个页面中多次使用该ul，所以我不想让空的ul元素挂在那里等待填充，我粘贴的代码也会这样做。它将创建ul和li，并传递我们放入div中的html。我真的必须在视图定义中包含

el

？我不能用

new app.TodoListView（{collection:app.todoList，el:'#container'}）传递它吗？因为我已经在执行您编写的操作（除了在视图定义中包含
el
），而且它不包含类名Yes，所以在创建视图实例时，您肯定也可以传入
el
。但是它应该存在于DOM中。Ya
#container
存在于DOM中，但是元素本身并不创建
ul
，如果我在模板中包含
，它就不会为它添加类名