1

我正在使用 Marionette 构建仪表板构建器和视图界面。我从遗留代码中获得了一些非常重量级的视图（大型报告），因此 html 是在服务器上预先构建的。

我为仪表板中的每一行都有一个 Marionette CollectionView，其中包含在仪表板构建期间拖到行上的每个小部件的 ItemView。

当用户将小部件从一行移动到另一行时，我想避免删除视图并不得不重建它（因为这将是很多不必要的 dom 操作），而是只想将元素从一个（行）CollectionView 和将其添加到另一个。在 Marionette 中使用 CollectionViews 完成此操作的最佳实践是什么？

默认情况下，跨 CollectionViews 移动项目似乎会破坏其中一个视图/模型并在另一个中重新实例化/重新渲染它。

我担心的是 DOM 中的 tablereport 将从一个集合移动到另一个集合不是原始 Marionette/Backbone 模板生成的视图，它只是我们设置为视图 el 的预定义 DOM 元素。

tablereport DOM 元素有许多子元素，这些子元素通过遗留代码而不是 Backbone 视图事件数组或通过 Backbone 的 listenTo 调用与其关联的事件。所以销毁 DOM tablereport 元素是我们需要避免保存这些事件，我们只想在 DOM 中重新定位它。

在 Marionette 中有效处理此功能的最佳方式是什么？

4

1 回答 1

0

我想到了几个选项，但是您的事件绑定代码不容易调用这一事实意味着您可能希望在删除元素时使用 jQuery detach() 方法来保持所有事件的绑定。

一种选择是在构建视图元素时缓存它们： - 在 CompositeView 的 buildItemView 方法中编写一个您委托给的视图工厂。- 让您的工厂根据模型的 model.cid 缓存它创建的视图的元素，该模型作为第一个参数传递给 buildItemView 方法。- 当您的工厂方法被调用时，从缓存中检索元素（如果存在），对其调用 detach()，并将其设置为 ItemView 的元素。- 覆盖视图上的渲染方法以阻止它重建 html - 从一个 CollectionView 的集合中移动模型并将其放入另一个 CollectionView 的集合中，然后 Marionette 将如上所述构建您的视图并插入元素（事件仍然绑定) 到 DOM 中。

假设您知道哪个 ItemView 已被删除，而不是执行上述操作，您可以： - 从第一个 CollectionView 的子容器中删除 ItemView（我相信这是一个 Backbone.Babysitter 实例，并且有它的文档） - 分离ItemView 的元素 - 将 ItemView 的元素插入 DOM 中的新位置 - 将 ItemView 插入第二个 CollectionView 的子容器 - 从第一个 CollectionView 的集合中删除模型 - 将模型静默添加到第二个 CollectionView 的集合中，从而防止 CollectionView 触发它构建一个新视图、渲染它并插入它的正常行为。

第一种方法可能更优雅，因为您仍然让 Marionette 做它的事情，但只是改变了 ItemViews 的构建、渲染和插入。第二种方法不太复杂，但意味着您必须自己手动保持一切同步 - 基本上是在做 Marionette 通常在幕后做的事情并阻止它“干扰”，可以这么说。

于 2014-01-21T23:30:56.803 回答