在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和属性.

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