View的主干变化模型答案

【问题标题】：Backbone change model of ViewView的主干变化模型
【发布时间】：2012-01-25 09:26:07
【问题描述】：

我是 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) 对我来说似乎是个 hack
(d) 每次我单击选项卡时都会创建一个新视图（这是性能问题？）

这里最好的做法是什么？

【问题讨论】：

我会尝试 (d) - 如果您先删除旧视图，这不会成为性能问题。
in (d) 我覆盖了我的 this.view.community 是否足够，还是必须手动删除？
这应该足够了，只要旧的 dom 元素没有闲置并且绑定了事件监听器，它们就应该被垃圾回收。我会用 firebug 进行验证，但我认为这是正确的。
我总是在我的视图中添加一个 close 方法，在取消绑定所有 bacbone 和 dom 事件后将其从 dom 中删除。
感谢您提出这个非常有用的问题！选项 (d) 也不是一个好的选择，因为如果您的（子）视图上有事件监听器，它们会在创建新的（子）视图时堆积起来

标签： javascript model-view-controller view model backbone.js

【解决方案1】：

你的一个解决方案几乎可以了：D

这是你想要的：

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

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

【讨论】：

communities.get(id).attributes 也可以工作并且对我来说看起来更干净。

【解决方案2】：

为什么你认为 (c) 是一个 hack？这似乎是一个封装旧模型的解除绑定并连接新模型的好地方。

【讨论】：

【解决方案3】：

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

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

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

您可以阅读此blog post 以了解更多信息。

【讨论】：

当然，但请记住该插件是相当新的，在不久的将来可能会更改几次

【解决方案4】：

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

如果/当您需要更多性能时，您可以花额外的时间来做 c。要成为最高性能，您不应该破坏和重新渲染模板。您应该使用 jquery 手动查找 DOM 上的元素并将它们替换为新模型。当你打电话时：

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

这是非常少的代码，但对浏览器来说有很多工作。用新模型替换 DOM 会更高效。

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

【讨论】：