javascript View的骨干变化模型
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8591992/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Backbone change model of View
提问by Riebel
I am fairly new to Backbone and have the following question:
我是 Backbone 的新手，有以下问题：
I have a collection of models.
我有一组模型。
I have a collection view displaying tabs (with a view for each model in the collection).
我有一个显示选项卡的集合视图（带有集合中每个模型的视图）。
I have a view for a model (for the content).
我有一个模型的视图（对于内容）。
I have a router with routes.
我有一个带路由的路由器。
What I am trying to achieve is a functionality like http://jqueryui.com/demos/tabs/
我想要实现的是像http://jqueryui.com/demos/tabs/这样的功能
I click on a tab (model of collection) and then want to pass the model to the content view maybe change it and reflect the changes in the collection.
我单击一个选项卡（集合模型），然后想将模型传递给内容视图，可能会更改它并反映集合中的更改。
I came up with four solutions:
我想出了四个解决方案：
In the router:
在路由器中：
'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)
})
}
The problem here is
这里的问题是
(a) does not reflect changes to the model in the collection
(b) does not trigger (change) events, because the bind in the initialize function of the view never triggers, because it is a completly new model
(c) seems like a hack to me
(d) everytime i click on a tab a new view is created (is this a performance issue?)
(a) 不反映集合中模型的更改
(b) 不触发（更改）事件，因为视图的初始化函数中的绑定永远不会触发，因为它是一个全新的模型
(c) 对我来说似乎是一个黑客
(d) 每次单击选项卡时都会创建一个新视图（这是性能问题吗？）
What is the best pratice here?
这里最好的做法是什么？
采纳答案by zsitro
One of your solution is close to be okay :D
您的解决方案之一接近没问题：D
Here is what you want:
这是你想要的：
this.view.community.model.set(communities.get(id).toJSON());
And this will trigger model.on("change") as well.
这也会触发 model.on("change") 。
回答by Paul Hoenecke
Why do you think (c) is a hack? It seems like a good place to encapsulate the unbinding of the old model, and connecting up the new one.
为什么你认为（c）是一个黑客？它似乎是封装旧模型的解绑并连接新模型的好地方。
回答by Paul
The Backbone.Marionetteplugin provides a streamlined solution for your problem.
该Backbone.Marionette插件提供了你的问题简化的解决方案。
It provides functionality for Application Initialization, View Management, and Event Aggregation.
它提供应用程序初始化、视图管理和事件聚合的功能。
In essence, it takes the pain out of hiding and showing multiple views.
从本质上讲，它消除了隐藏和显示多个视图的痛苦。
You can read this blog postto learn more about it.
您可以阅读此博客文章以了解更多信息。
回答by puppybits
The short answer is you should use d. Yes is isn't performant but unless you notice slowdown in the user interface you shouldn't worry too much. You should code something that 1. always works 2. doesn't take long to code so you can move on to coding other more important features.
简短的回答是你应该使用 d。是的，性能不佳，但除非您注意到用户界面变慢，否则您不必太担心。你应该编写一些 1. 总是有效的东西 2. 不需要很长时间来编码，这样你就可以继续编写其他更重要的功能。
If/when you need more performance then you can take the extra time to do c. To be the most performant you shouldn't destroy and re-render templates. You should use jquery to manually find the elements on the DOM and replace them with the new model. When you call:
如果/当您需要更高的性能，那么您可以花额外的时间来做 c。为了获得最高性能，您不应该破坏和重新渲染模板。您应该使用 jquery 手动查找 DOM 上的元素并将它们替换为新模型。你打电话的时候：
view.$el = _.template(string, model);
It's very little code but lots of work for the browser. Replacing the DOM with a new model is much more performant.
这是很少的代码，但为浏览器做了很多工作。用新模型替换 DOM 的性能要高得多。
If you need to be more performant you can use object pooling. I've been working on a PerfView for backbone that implements a lot of optimizations. https://github.com/puppybits/BackboneJS-PerfViewThere's comments in the code with a lot of best practices to maintain the best browser performance.
如果您需要更高的性能，您可以使用对象池。我一直在研究用于实现大量优化的主干的 PerfView。https://github.com/puppybits/BackboneJS-PerfView代码中有注释，有很多保持浏览器最佳性能的最佳实践。
