切换模型视图的最佳方法是什么?
我有一组模型,每个模型都由一个视图表示,比如一个jquery draggable div。当div被拖动到页面的某个区域时,我想使用不同的视图表示。
我应该: a)为每个模型设置不同的视图,并切换视图?我可以为每个视图设置不同的“el”,并切换使用“el”吗? b)将不同的DOM元素构建到一个视图中并相应地显示/隐藏?
另外,如果我想要一个“隐藏视图”,而不是仅仅使用hide(),我如何分离与模型相关的所有DOM元素,但仍然将模型保留在集合中?我还希望稍后重新附加或重新呈现DOM元素。
澄清:对于上面的最后一段,我的意思是如果我使用hide()它只是将可见性样式设置为none,但如果我有许多隐藏元素我认为它可能是最好从页面中删除它们并在必要时重新呈现它们。假设我有100个这样的元素需要在“隐藏”和“可见”之间切换。人们的想法是什么?
答案 0 :(得分:1)
Backbone之美在于你可以随心所欲地做到这一点。没有正确或错误的方法,但可能有一种更适合您应用的方式。
我最初的想法是为同一个模型提供两个单独的视图,但是现在我想到了它,你可以在视图中轻松拥有一个切换布尔值,让渲染函数知道要在哪个视图中呈现具体案例。通过这种方式,您无需更改el
。
答案 1 :(得分:1)
我是第二个@Jeremy。让我们这样想,如果你没有骨干,但只有jquery你会做什么?可能为不同类型的视图创建多个div(比方说),并使用jquery的toggle(...)函数在它们之间切换。现在你有骨干 - 有什么不同?结构/清洁的代码组织。它不直接影响你的逻辑只能更好地组织它。
那么这就是说:拥有多个视图并将它们绑定到您将用于查看模型的div(例如)。有一个ViewHandler类,它处理视图的不同呈现并在它们之间切换。使用jquery的切换(如果切换是顺序的)或创建自己的(非常简单)。让ViewHandler的渲染函数处理要调用的视图和要隐藏的视图。视图对象继续存在,尽管它只是隐藏的相应DOM元素。
你说:
另外,如果我想要一个“隐藏的视图”,而不是仅仅使用 hide(),我如何分离与模型关联的所有DOM元素 仍然将模型保留在集合中?我还想重新加入 或稍后重新渲染DOM元素
DOM元素如何直接与模型相关联?我的意思是该模型仅用于保存数据。您可以从元素中获取数据,但不应将它们绑定到DOM。可以这说,这就是观点的工作。模型应仅包含数据 - 如果您绑定到<p>
标记,我宁愿您拥有属性'text'(模型)并绑定到<p>
的innerHTMl / text - 所有更改为模型应该只通过视图或服务器的fetch等进行。这样模型只是一个数据持有者,你可以随时随地保存它们!无需重新连接/分离视图!
一旦隐藏了相应的DOM元素,它就会使关联的视图处于非活动状态,因此您无需担心附件/分离。如果基础数据(即页面数据)发生变化,那么当视图可见时,模型可以自行更新:)我不知道如何将它们绑定到DOM会阻止您操纵不同的对象?它们是“绑定”但不与DOM绑定,对象只是javascript对象/引用,您可以存储/移动它们。除非你实际存储jquery对象引用,除非你在视图之外操作它们(噩梦!!)你也应该好好绕过引用!
我仍然会使用'数据'方法来处理模型,而不是将它们绑定到视图上。
这是否澄清了你的困惑?
更新:(根据说明)
如果你确实有100个奇怪的元素并且你想隐藏/显示它们并且决定删除/新建它们是否是更好的选择 - 我想我仍然会使用hide / show。 Javascript中的垃圾收集最好通过将所有对象引用设置为null来实现。然后再次创建新的。可能会出错并且内存泄漏或悬挂对象或具有多个引用的对象。如果你知道你将在节目中尽快重用视图,我建议隐藏。如果你永远不会重复使用它,那么将其设置为null以进行垃圾收集是最佳选择,IMO。
答案 2 :(得分:0)
我选择渲染一个新视图,并在删除旧视图之前将其插入旧视图上方。可以缓存旧视图并将其恢复到DOM(相对于必须重新渲染它),但我不喜欢这样,因为缓存视图消耗资源并继续响应应用程序中的事件。
或者,您可以创建容器视图作为视图的占位符,并在从一个视图切换到另一个视图时交换它的内容(内容本身可以是它自己的视图)。