Backbone 模板方法差异

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
});

之后，向项目视图添加功能真的很容易。它甚至可以在不同的列表中重复使用，因为 列表和项目是分离的。

Backbone 模板方法差异

Backbone templating approaches differences

javascript

backbone.js

marionette

underscore.js-templating