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

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

本文关键字：DOM 列表 插入排序 顺序 #each 排序 对象 嵌套 键部 ractive 关联      更新时间：2023-09-26

我已经看到了很多在 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}}

我希望能够：

  1. 在呈现嵌套对象键数据集时指示 DOM 节点/视图放置顺序（不是实际的对象列表本身，因为它本身没有顺序 #each 并且
    2. 将新 DOM 节点的插入点
  2. 由 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% 的代码和算法与键控嵌套对象列表一致，而不是对象数组。

我考虑了三种可能性：

  1. 一些等效的数组排序类似功能，可以很容易地在模板渲染或发布时受到影响
  2. 为每个单独的嵌套列表对象创建组件实例并使用反应式 DOM 方法或
  3. 暴力强制虚拟或真实 DOM，但我不确定这是否会破坏数据绑定。

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

为什么不使用基于对象的计算属性。只需ractive.get对象数据（从而注册依赖项）并返回您喜欢排序的值。在模板中，将循环访问此新的计算属性。每当插入新键时，计算属性都会自动更新，然后模板/视图也会主动重新呈现

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

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

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

See link below for codepen example:

代码笔链接

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

相关文章：