2011-08-06 39 views
3

切换模型视图的最佳方法是什么?模型的backbone.js切换视图

我有一个模型的集合,并且每个模型都由一个视图来表示,例如一个jQuery可拖动的div。当div被拖动到页面的某个区域时,我想使用不同的视图表示。

应该我: a)为每个模型设置不同视图并切换视图?我可以为每个视图使用不同的“el”,并切换使用哪个“el”? b)将不同的DOM元素构建到单个视图中并相应地显示/隐藏?另外,如果我想要一个“隐藏视图”,而不是仅仅使用hide(),我怎样才能分离与模型相关的所有DOM元素,但仍然保持模型在集合中?我还想稍后重新附加或重新呈现DOM元素。

澄清:上面最后一段,我的意思是,如果我使用隐藏(),它只是设置可见样式首屈一指,但如果我有很多隐藏要素,我想这可能是更好的删除从页面中重新渲染它们。假设我有100个需要在“隐藏”和“可见”之间切换的元素。人们认为什么?

回答

1

Backbone的美妙之处在于,您可以随心所欲地做到这一点。没有正确或错误的方式,但可能有更适合您应用程序的方式。

我最初的想法是对同一个模型有两个单独的视图,但现在我想到了,您可以在视图中轻松地使用切换布尔值,以便渲染函数知道要渲染哪个视图那个特定的情况。这样您就不必乱用el

1

我第二@Jeremy。让我们这样想,如果你没有骨干,但只有jquery你会怎么做?可能会为不同类型的视图创建多个div(例如),并使用jQuery的toggle(...)函数在它们之间切换。现在你有骨干 - 有什么不同?代码的结构/清洁组织。它不会直接影响你的逻辑,只会更好地组织它。

那么这就是说:有多个视图并将它们绑定到您将用于查看模型的div(例如)。有一个ViewHandler类来处理视图的不同渲染,并在它们之间切换。要么使用jQuery的切换(如果切换是连续的)或创建自己的(非常简单)。让ViewHandler的渲染函数处理要调用哪个视图以及要隐藏哪个视图。虽然只有隐藏的相应DOM元素,但视图对象仍然存在。

你说:

另外,如果我想有一个“隐藏视图”,而非只是使用 隐藏(),我怎么可以分离相关的模型,但 仍然是所有的DOM元素保持模型在集合中?我还想重新附加 或稍后重新渲染DOM元素

DOM元素如何直接与模型相关?我的意思是这个模型只是为了保存数据。您可以从元素获取数据,但不应将它们绑定到DOM。可以这么说,这就是视图的工作。模型应该只包含数据 - 如果你绑定到一个<p>标签,我宁愿你有属性“文本”(模型),并绑定到<p>的innerHTMl /文本 - 所有对模型的改变应该通过视图发生或服务器的提取等。这样,模型只是一个数据的持有者,你可以随时随地保存它们,你喜欢多久!无需重新附加/分离视图!

一旦你隐藏了相应的DOM元素,它会使关联的视图处于不活动状态,因此你不必担心附件/分离。如果底层数据(即页面数据)发生变化,那么您的模型可以在视图可见时自行更新:)我不明白,即使将它们绑定到DOM也不能阻止您操作不同的对象?它们是绑定的,但不绑定到DOM,对象只是可以存储/移动的javascript对象/引用。除非你实际上存储jquery对象引用,除非你在视图之外大幅操纵它们(噩梦!!),否则你应该很好地传递参考!

我仍然只用模型的“数据”方法,但没有绑定到视图。

这是否澄清你的困惑?

UPDATE:(按说明)

如果你确实有100余元,你想隐藏/显示他们,并决定是否删除/新-ING他们会是一个更好的选择 - 我猜我仍然带着隐藏/表演。通过将所有对象引用设置为null可以很好地实现JavaScript中的垃圾收集。然后你再次创建新的。有可能犯一个错误,并有内存泄漏或悬挂对象或具有多个引用的对象。如果你知道你要在节目中尽快重新使用视图,我会建议隐藏。如果您永远不会重复使用它,将它设置为空垃圾收集是一种方式,IMO。

+0

谢谢@Nupul我更新了问题,并澄清了有关隐藏的部分。我同意保持模型严格的数据,所以我的意思是从视图中分离DOM元素。 – fortuneRice

+0

@fortuneRice:查看更新 – PhD

0

我选择渲染一个新的视图并在删除旧的视图之前将其插入到旧视图上方。可以缓存旧视图并将其恢复到DOM(而不必重新渲染它),但我不喜欢这样做,因为缓存视图消耗资源并继续响应应用程序中的事件。

或者,您可以创建一个容器视图作为视图的占位符,并在您从一个视图切换到另一个视图时交换它的胆量(胆量本身可能是它自己的视图)。