View的backbone变化模型

Question

我对 Backbone 相当陌生，有以下问题：

我有一组模型。

我有一个显示选项卡的集合视图（带有集合中每个模型的视图）。

我有一个模型的视图（内容）。

我有一个带有路由的路由器。

我想要实现的是像 http://jqueryui.com/demos/tabs/

我单击一个选项卡的 功能（集合模型）然后想要将模型传递到内容视图，可能会更改它并反映集合中的更改。

我想出了四种解决方案：

在路由器中：

'switchCommunity': function(id) {
        // (a) set new model attributes
        this.view.community.model.set(communities.get(id));

        // (b) replace model
        this.view.community.model = communities.get(id);

        // (c) a custom function of the view changes its model
        this.view.community.changeModel(communities.get(id));

        // (d) a new view
        this.view.community = new View({
            model: communities.get(id)
        })
}

这里的问题是

• (a) 没有反映对模型的更改 集合

• (b) 不会触发（更改）事件，因为绑定在 视图的初始化函数永远不会触发，因为它是 一个完全新的模型

• (c) 对我来说似乎是一个黑客

• (d) 每次我单击一个选项卡时，都会创建一个新视图（这是一个 性能问题？）

这里的最佳实践是什么？

Answer 1

您的解决方案之一几乎没问题：D

这就是您想要的：

this.view.community.model.set(communities.get(id).toJSON());

这也会触发 model.on("change") 。

Answer 2

为什么你认为（c）是一个黑客行为？这似乎是一个封装旧模型的解绑并连接新模型的好地方。

Answer 3

Backbone.Marionette 插件为您的问题提供了简化的解决方案。

它提供应用程序初始化、视图管理和事件聚合的功能。

从本质上讲，它消除了隐藏和显示多种视图的痛苦。

您可以阅读这篇博客文章 了解更多信息。

Answer 4

简短的答案是你应该使用 d。是的，它的性能不高，但除非您注意到用户界面速度变慢，否则您不必太担心。您应该编写一些 1. 始终有效 2. 不需要很长时间的代码，以便您可以继续编写其他更重要的功能。

如果/当您需要更多性能时，您可以花额外的时间来执行 c。为了获得最佳性能，您不应该破坏并重新渲染模板。您应该使用 jquery 手动查找 DOM 上的元素并用新模型替换它们。当您调用时：

view.$el = _.template(string, model); 

代码很少，但浏览器需要做很多工作。用新模型替换 DOM 的性能要高得多。

如果您需要更高的性能，可以使用对象池。我一直致力于开发用于骨干网的 PerfView，它实现了很多优化。 https://github.com/puppybits/BackboneJS-PerfView 代码中有很多注释保持最佳浏览器性能的最佳实践。