6

我的模型视图有 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();
    }
});
4

1 回答 1

20

首先，您PhotoListView正在包装一个集合，因此您应该this.collection在视图中使用并new PhotoListView({ collection: c })创建它。视图对待collection选项的方式与对待选项的方式类似model：

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

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

使用正确的名称将有助于防止混淆。此外，视图已经混合了一些下划线方法，因此您可以说this.collection.each(...)代替_.each(this.collection.models, ...)or _(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要从集合视图中指定选项。Underscoreeach将迭代索引作为第二个参数传递给回调函数，因此您只需要一些整数数学来确定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);
于 2012-07-04T22:14:00.880 回答