Question

我的模型视图有2个不同的模板。每次从数据库中提取模型时，从后端获取的前3个模型（＃1,2,3）将使用第一个模板创建视图，接下来的4个模型（＃4,5,6,7）将使用第二个模板，接下来的3个模型（＃8,9,10）将使用第一个模板，依此类推。

问题：如何使用backbone.js引入此交替模板？

JS代码

// Views

PhotoListView = Backbone.View.extend({
    el: '#photo_list',

    render: function() {
        $(this.el).html('');
        _.each(this.model.models, function(photo) {
            $(this.el).append(new PhotoListItemView({ model: photo }).render().el);
        }, this);
        return this;
    }
});

PhotoListItemView = Backbone.View.extend({
    tagNAme: 'div',
    className: 'photo_box',

    template: _.template( $('#tpl_PhotoListView').html() ),

    initialize: function() {
        this.model.bind('destroy', this.close, this);
    },

    render: function() {
        $(this.el).html( this.template( this.model.toJSON() ) );
        return this;
    },

    close: function() {
        this.unbind();
        this.remove();
    }
});

Answer 1

首先，您的PhotoListView正在包装一个集合，因此您应该在视图中使用this.collection并new PhotoListView({ collection: c })来创建它。视图处理collection option similarly to how they treat model：

构造函数/初始化 new View([options])

[...]有几个特殊选项，如果通过，将直接附加到视图：model，collection，el，id， className，tagName和属性。

使用正确的名称有助于防止混淆。此外，视图已经混合了some Underscore methods，因此您可以说this.collection.each(...)而不是_.each(this.collection.models, ...)或_(this.collection.models).each(...)。您也可以使用this.$el代替$(this.el)。

现在谈谈你真正的问题。您可以在每个模型视图中添加两个模板：

PhotoListItemView = Backbone.View.extend({
    template0: _.template($('#the-first-template-id').html()),
    template1: _.template($('#the-other-template-id').html()),
    //...
});

并告诉它使用哪一个：

initialize: function(options) {
    this.template = this['template' + options.template_number];
    //...
}

然后您只需要从集合视图中指定group选项。下划线的each将迭代索引作为第二个参数传递给回调函数，因此您只需要一些整数数学来确定要使用的template_number：

this.collection.each(function(photo, i) {
    // Grouped in threes and you're alternating between two templates.
    var n = Math.floor(i / 3) % 2; 
    var v = new PhotoListItemView({ model: photo, template_number: n });
    this.$el.append(v.render().el);
}, this);

在backbone.js中交替使用2个不同的模板

1 个答案: