Question

我想了解Backbone模板方法。我正在使用Marionette来处理CollectionViews。

这样做有什么不同：

// This approach is working fine.

<script type="text/template" id="single-item">
    <li><strong><%= userName %></strong></li>
</script>

而不是：

<ul>
    each( Loop into each collection item ) :
        <li><%= item.property %></li>
    endEach;
</ul>

Answer 1

Marionette CollectionView为每个集合项创建一个视图实例。因此，您可以完全控制该项目。

假设您要列出具有处理所有列表本身的单个视图的用户。它看起来像这样：

var UserList = Backbone.View.extend({
    template: _.template($('#user-list-template').html()),
    render: function(){
        this.$el.html(this.template({ users: this.collection.toJSON() }));
        return this;
    }
});

和模板

<script type="text/template" id="user-list-template">
    <ul>
    <% _.each(users, function(user) { %>
        <li><%= user.email %></li>
    <% }) %>
    </ul>
</script>

它非常简单，从那里看起来很不错。

但是，你想为列表中的每个用户添加一个编辑按钮。上面的方法开始出现真正的问题。您必须猜测单击了哪个元素，或将用户ID放在模板中的data-id属性中。所有这些糟透了。

CollectionView让你轻松处理这一切，并且一切都由它负责。

制作项目视图：

var UserListItem = Marionette.View.extend({
    template: _.template($('#user-list-item-template').html()),
    events: {
        'click @ui.edit': 'onEdit',
    },
    ui: {
        edit: '.edit-btn'
    },
    onEdit: function(e) {
        this.model.id; // the user model directly accessible
    }
});

使用超级简单的模板。

<script type="text/template" id="user-list-item-template">
    <li><%= user.email %> <button type="button" class="edit-btn">edit</button></li>
</script>

然后在列表视图中使用它。

var UserList = Marionette.CollectionView.extend({
    tagName: 'ul',
    childView: UserListItem
});

之后，在项目视图中添加功能非常简单。它甚至可以在不同的列表中重复使用，因为列表和项目是分离的。

骨干模板接近差异

1 个答案: