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

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

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

Answer 2

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

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

尝试执行以下操作：

注意：div id作为container的{{1}}已经存在于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});

Backbone View没有创建“本身”

2 个答案: