ractive js：直接 dom 插入 sort/order 用于与模板中的#each 关键部分关联的嵌套对象列表

Question

我已经看到很多在 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 node/view 放置顺序（不是实际的对象列表本身，因为它本身没有顺序）并且
将由 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% 的代码和算法与键控嵌套对象列表对齐，而不是对象数组。

我考虑了三种可能性：

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

我已经 3 天开始活跃了，所以我希望有人可以提供最 "ractive" 的解决方案。现在我的整个视图都在一个 Ractive 实例中，我想在插入一个新的关键对象成员时继续它的简单性和新渲染的 "auto magic" 特性。该解决方案还需要保留双向绑定。

Answer 1

为什么不根据您的对象使用 computed property。只需 ractive.get 对象数据（从而注册依赖项）和 return 按您喜欢的方式排序的值。在您的模板中，您将遍历这个新计算的属性。每当插入新密钥时，计算的属性将自动更新，然后您的 template/view 也将被积极地重新呈现

Answer 2

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

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

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

See link below for codepen example:

Codepen Link

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

ractive js：直接 dom 插入 sort/order 用于与模板中的#each 关键部分关联的嵌套对象列表

ractive js : direct dom insertion sort/order for nested object list associated with #each key section in template

javascript

jquery

ractivejs