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

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选项与处理model方式类似 ：

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

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

使用正确的名称有助于防止混淆。 此外，视图中已经混合了一些 this.collection.each(...) 方法 ，因此您可以说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选项。 Underscore 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);