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（“更改”）。

Answer 2

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

Answer 3

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

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

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

您可以阅读此blog post以了解详情。

Answer 4

简短的回答是你应该使用d。是的并不是高效的，但除非你注意到用户界面的减速，否则你不必过于担心。您应该编写1.总是有效的代码.2。代码编写时间不长，因此您可以继续编写其他更重要的功能。

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

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

这是很少的代码，但浏览器的工作量很大。用新模型替换DOM的效果要高得多。

如果您需要更高效，可以使用对象池。我一直在研究PerfView for backbone，它实现了很多优化。 https://github.com/puppybits/BackboneJS-PerfView代码中有一些注释，其中包含许多保持最佳浏览器性能的最佳实践。

View的骨干变换模型

4 个答案: