1

有一个Bckabone视图产品：

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

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

当其中一个被选择/未选择以查看其完整模板时，我如何隐藏/显示其他视图，以便它可以扩展到完整的容器宽度。

我应该为整个集合使用视图吗？我如何处理事件处理？

谢谢！

编辑

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

但是我仍然不确定我是否可以以更优雅的方式实现相同的结果？我只是认为隐藏兄弟姐妹不是解决它的最佳方法：

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;
}
4

1 回答 1

0

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

您可以做到这一点的一种方法是创建一个主视图，供用户选择。当用户决定您应该从该视图触发一个方法，该方法使用不同的模板呈现集合中的每个模型。在您的主视图上，您​​应该有一个容器（表格、div、ul 等），您将在其中附加每个模型视图。

所以，归根结底，你得有意见。一个充当处理用户选择的集合的容器。然后你有另一个视图来渲染集合中的单个模型。此视图必须具有可以使用的模板。在主视图上，您​​迭代集合，为每个模型创建一个新视图实例，以根据用户决定使用不同的模板附加到容器中。

于 2013-02-27T12:51:45.173 回答