Backbone.js 切换模型视图

Question

什么是切换模型视图的最佳方法？

我有一组模型，每个模型都由一个视图表示，比如一个jquery可拖动的div。当这些div被拖到页面的某个区域时，我想使用不同的视图表示。

我应该： a）为每个模型设置不同的视图，并切换视图？我可以为每个视图设置不同的“el”，并切换使用哪个“el”吗？ b）将不同的DOM元素构建到单个视图中，并相应地显示/隐藏？

此外，如果我想要一个“隐藏的视图”，而不仅仅是使用hide()，如何分离与模型相关联的所有DOM元素但仍保留模型在集合中？我还想在以后的某个时间重新附加或重新渲染DOM元素。

澄清一下：对于上面的最后一段，我的意思是如果我使用hide()，它只会将可见性样式设置为none，但如果我有许多隐藏的元素，我认为最好将它们从页面中删除，并在必要时重新呈现它们。假设我有100个这样的需要在“隐藏”和“可见”之间切换的元素。人们怎么想？

- fortuneRice

Answer 1

Backbone的美在于你可以按照自己的喜好去使用它。没有对错之分，但可能有一种方式更适合你的应用。

我最初的想法是为同一个模型创建两个单独的视图，但现在想想，你也可以在视图中加入一个切换布尔值，让渲染函数知道在特定情况下要呈现哪个视图。这样你就不必麻烦地更改el了。

- Jeremy

Answer 2

我赞同@Jeremy的观点。让我们这样想，如果你没有backbone，只有jquery，你会怎么做？可能会为不同类型的视图创建多个div，并使用jquery的toggle(...)函数在它们之间切换。现在你有了backbone——有什么不同呢？代码结构更清晰/更有组织性。它并不直接影响你的逻辑，只是更好地组织了它。

那么这意味着什么：拥有多个视图并将它们绑定到要用于查看模型的div（例如）。有一个ViewHandler类来处理不同的视图渲染并在它们之间进行切换。如果切换是顺序的，则使用jquery的toggle；否则自己创建（非常容易）。让ViewHandler的render函数处理调用哪个视图以及隐藏哪个视图。视图对象仍然存在，尽管只有相应的DOM元素被隐藏。

你说：

引用：

另外，如果我想要一个“隐藏的视图”，而不仅仅是使用hide()，如何分离与模型相关联的所有DOM元素，但仍保留集合中的模型？我还想在稍后的某个时候重新附加或重新渲染DOM元素

DOM元素如何直接与模型相关联？我的意思是，模型只是用来保存数据的。您可以从元素中获取数据，但不应将它们绑定到DOM。那是视图的工作，可以这么说。模型应该仅包含数据 - 如果您要绑定到<p>标记，我宁愿您拥有“text”属性（模型的属性），并绑定到<p>的innerHTML / text - 所有对模型的更改都应通过视图或服务器的fetch等方式进行。这样，模型只是一个数据持有者，您可以在任何地方保留它们多长时间！无需重新附加/分离视图！

一旦隐藏相应的DOM元素，它将使关联视图无效，因此您不必担心附加/分离。如果底层数据（即页面数据）发生更改，则在视图可见时，您的模型可以自行更新 :) 我不明白即使将它们绑定到DOM中也如何防止您操作不同的对象？它们是“绑定”的但不是“绑定”到DOM上，而对象只是JavaScript对象/引用，您可以存储/移动它们。除非您实际上正在存储jQuery对象引用，并且除非您在视图之外大量操作它们（噩梦！！），否则您只需传递引用就可以了！

尽管如此，我仍然会选择仅使用“数据”方法来处理模型，而不将其绑定到视图。

这样是否澄清了您的困惑？

更新：（根据澄清）

如果你确实有100个奇数元素，想要隐藏/显示它们并且正在决定删除或新建它们哪个选项更好- 我猜我仍然会选择隐藏/显示。在Javascript中进行垃圾回收最好的方式是将所有对象引用设置为null, 然后再创建新的对象。因为有可能会出现错误，例如内存泄漏、悬挂对象或具有多个引用的对象。如果你知道很快就会重新使用视图，我建议选择隐藏。如果你永远不会再次使用它，将其设置为null以进行垃圾回收是我认为比较好的方式。

- PhD

---

感谢@Nupul，我已经更新了问题并澄清了有关隐藏部分的内容。我同意严格将模型保持为数据，所以我实际上是指从视图中分离DOM元素。 - fortuneRice

Answer 3

我选择在移除旧视图之前，将新视图渲染并插入到旧视图上方。虽然可以缓存旧视图并将其恢复到DOM中（而不是重新呈现它），但我不喜欢这样做，因为缓存的视图会消耗资源，并继续响应应用程序中的事件。

或者，您可以创建一个容器视图作为您的视图的占位符，并在切换从一个视图到另一个视图时替换它的内容（该内容本身可以是自己的视图）。

- Mario