javascript - 模板切换 View 的集合。 Backbone .js

Question

有一个 Bckabone View 产品:

Product = Backbone.View.extend({
    templateBasic: _.template($("#pcard-basic").html()),
    templateFull: _.template($("#pcard-full").html()),
    initialize: function() {
       this.render(this.templateBasic);
    },
// ...

这是我的草稿:http://jsfiddle.net/challenger/xQkeP/73

当选择/取消选择其中一个 View 以查看其完整模板时，如何隐藏/显示其他 View ，以便它可以扩展到整个容器宽度。

我应该对整个集合使用 View 吗？我如何处理事件处理？

谢谢!

编辑

这是我的最终草案:http://jsfiddle.net/challenger/xQkeP/

但我仍然不确定是否可以以更优雅的方式实现相同的结果？我只是认为隐藏 sibling 并不是解决问题的最好方法:

viewBasic: function(e) {
    e.preventDefault();
    this.render(this.templateBasic);
    if(this.switchedToFull) {
        this.$el.siblings().show();
        this.switchedToFull = false;
    }
},
viewFull: function(e) {
    e.preventDefault();
    this.render(this.templateFull);
    this.$el.siblings().hide();
    this.switchedToFull = true;
}

Answer 1

如果我理解正确的话，您希望以两种不同的方式显示集合中的所有模型，然后选择如何将它们呈现给用户，对吗？

实现此目的的一种方法是创建一个主视图，在其中进行用户选择。当用户决定您应该从该 View 触发一个方法，该方法使用不同的模板呈现集合中的每个模型。在主视图上，您​​应该有一个容器(table、div、ul 等)，您将在其中附加每个模型 View 。

所以，最终还是要看观点。它充当集合的容器，负责处理用户的选择。然后，您可以使用另一个 View 来渲染集合中的单个模型。该 View 具有可以使用的模板。在主视图上，您​​迭代集合，为每个模型创建一个新的 View 实例，以便根据用户的决定使用不同的模板附加到容器中。