ractive js：与模板中的#each键部分关联的嵌套对象列表的直接dom插入排序/顺序

Posted 2023-02-19

【中文标题】ractive js：与模板中的#each键部分关联的嵌套对象列表的直接dom插入排序/顺序

【英文标题】：ractive js : direct dom insertion sort/order for nested object list associated with #each key section in template

【发布时间】：2016-04-24 04:41:54

【问题描述】：

我已经看到很多在 Ractive 中使用基于数组的函数对列表进行排序和排序的示例，但我想知道对于嵌套对象列表是否可以轻松实现相同的功能：

假设是这样的：

var ractive = new Ractive(      
      el: 'main-col',
      template: $(templates).html(),
      data: ObjList: key1:x:data,y:dataB,....,key2:x:data,y:dataB,....,..        );

template: #each ObjList render a card view per each key object nest /#each

我希望能够：

在渲染 #each 嵌套对象键数据集时指示 DOM 节点/视图放置顺序（不是实际的对象列表本身，因为它本身没有顺序） 将新对象插入的 ractive auto magic #each 模板生成的新 DOM 节点的插入点指向渲染的 #each 列表中的特定点。

例如：

#each ObjList
<div>key1 data view</div>
<div>key2 data view</div>
<--------Insert new key5 nest object rendering in DOM tree, here
<div>key3 data view</div>
<div>key4 data view</div>
/ each

我目前有一个仅包含键名的数组，用于跟踪我想要的排序顺序： sortArray=[key1,key2,key5,key3,key4...]。我将它用作链表以特定顺序遍历嵌套对象以进行一些渐进式计算。但我 95% 的代码和算法都与键控嵌套对象列表对齐，而不是对象数组。

我考虑了三种可能性：

一些等效的类似数组排序的功能，可以在模板渲染时或之后轻松实现 为每个单独的嵌套列表对象创建组件实例并使用 ractive DOM 方法或 暴力破解虚拟或真实 DOM，但我不确定这是否会破坏数据绑定。

我已经 3 天进入 ractive 所以我希望有人可能有一个解决方案，这将是最“活跃”的方式。现在我的整个视图都在一个 Ractive 实例中，我想在插入新的关键对象成员时继续它的简单性和新渲染的“自动魔术”功能。该解决方案还需要保留双向绑定。

【参考方案1】：

为什么不根据您的对象使用computed property。只需ractive.get 对象数据（从而注册依赖项）并返回按您喜欢的方式排序的值。在您的模板中，您将遍历这个新的计算属性。每当插入新键时，计算属性将自动更新，然后您的模板/视图也将被重新渲染

【讨论】：

感谢您的回复和创意概念。它也启发了我尝试对您的主题进行一些变体，因为我遇到了解决方案的一些障碍。我最终工作了两条路径：1）创建一个函数来返回要迭代的对象的排序列表和2）创建一个“计算”属性函数（一个数据函数，因为计算属性只是实例）返回一个排序对象（每个迭代器）。路径 2 打破了双向绑定，因为您需要一个表达式来访问对象成员。途径 1）抛出“无法计算”（ractive 似乎需要定义的数据集进行迭代）

澄清途径 1)：我尝试将函数作为正式计算属性和数据函数。

【参考方案2】：

根据我最初的直觉，我最终从可能的解决方案列表中选择了 2。我为我的卡片视图创建了一个组件定义。然后，我在父模板#each 部分/迭代器中引用了父模板中的卡片组件，并传入了一个键标识符（这样我就可以在将来的调用中关联哪个组件实例与哪个嵌套对象键相关联）。我还对事物进行了模板化，因此将相同的键标识符分配给每个卡片组件实例的容器 div id。

有了这些关系，我能够捕捉到默认渲染（onrender）的实例事件，该事件自动魔术将新的嵌套数据对象附加到卡片视图列表的末尾。在事件处理中，我使用 ractive.insert 方法有效地覆盖了该位置，并使用了随后的新位置。通过将父 div id 和所需的兄弟卡 div id(anchor) 插入点传递给 ractive.insert，我能够以所需的顺序重新渲染新卡。

虽然这解决了我最初关于添加卡用例的问题，但它仍然为第二个用例产生了一个挥之不去的问题：删除卡。未从父容器活动组件列表中删除空（“已删除”）嵌套对象键的关联活动组件实例。在显式调用实例的 teardown 后也不会被 de 引用（尽管它已从视图中删除），因此其实例特定的数据函数仍称为 post“delete”。我怀疑存在一些数据绑定或拆卸清理问题。由于担心潜在的内存泄漏和幻像卡实例的处理开销，我将单独跟进该用例。

See link below for codepen example:

Codepen Link

此代码笔通过切换排序按钮演示默认排序和排序版本

【讨论】：

您可以创建一个 jsfiddle 或 codepen 来演示您尝试过的两种解决方案吗？这样一来，如果您遗漏了一些琐碎的事情，我们可以提供更好的帮助。

检查issue 和建议的解决方案。