Question

有一个Bckabone视图产品：

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

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

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

谢谢！

修改

这是我的最终草稿：http://jsfiddle.net/challenger/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;
}

Answer 1

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

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

所以，最后，你必须要观看。一个充当集合的容器，负责处理用户选择。然后你有另一个视图来从集合中渲染单个模型。此视图包含可以使用的模板。在主视图上，您将遍历集合，为每个模型创建一个新的视图实例，以根据用户决策使用不同的模板附加到容器中。

模板切换视图的集合。 Backbone.js的

1 个答案: