视图的主干更改模型

我对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）不触发（更改）事件，因为在视图中的初始化函数绑定从来没有触发，因为它是一个完全地新模式
（三）似乎是一个黑客对我
（d）每次我点击新视图中创建一个标签（这是一个性能问题？）

什么是最好的初步实践吗？

来源

2011-12-21 Riebel

我会尝试（d） - 如果先移除旧视图，这不会成为性能问题。 – swatkins 2011-12-21 15:27:06

（d）我覆盖了我的this.view.community是否足够，还是必须手动删除它？ – Riebel 2011-12-21 15:32:38

这应该是足够的，只要老dom元素没有挂在身边，并有事件监听器绑定到他们，他们应该被垃圾收集。我会用萤火虫进行验证，但我认为这是正确的。 – swatkins 2011-12-21 15:34:07

你的一个解决方案已经接近没事：d

这里是你想要的东西：

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

，这将触发model.on（ “变”）为好。

来源

2012-11-13 08:44:27 zsitro

'communities.get（id）.attributes'也有效，并且对我来说看起来更清洁。 – 2016-10-31 00:41:14

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

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

实质上，它隐藏并显示多个视图的痛苦。

你可以阅读这个blog post了解更多关于它。

来源

2011-12-21 15:36:23 Paul

当然，但请记住插件是相当新的，可能会改变在不远的将来 – Sander 2011-12-21 20:20:22

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

来源

2012-01-27 01:56:57

简短的回答是你应该使用d。是的不是高性能的，但除非你注意到用户界面放缓，否则你不应该太担心。你应该编码的东西，总是有效的2.不需要很长的代码，所以你可以继续编码其他更重要的功能。

如果/当你需要更多的表现，那么你可以花费额外的时间来做c。要成为最高性能的应用程序，您不应该销毁和重新呈现模板。您应该使用jquery手动查找DOM上的元素并将其替换为新模型。当你拨打电话：

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

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

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

来源

2013-10-22 04:34:23 puppybits

视图的主干更改模型

回答

相关问题