Aurelia JS - 多级绑定/更新？

Question

我不确定我是否在这里使用了正确的术语 - 但这里有一个例子：

• https://gist.run/?id=57ed46429e4583eb4c3fb11814451a55

这就是它在 Chromium 中的样子：

基本上，顶部的条目（红色轮廓）是将数组可视化为“第一级”数据显示；在这里可以切换每个元素的选择，并进行多元素选择（红色背景）。作为“一级”显示源的数组是mydata in first-level-items.js。

那些在“一级”中被选中的项目，然后在“二级”中再次显示（绿色轮廓）；这里显示了相同的名称和值信息，尽管略有不同。在这里也可以切换元素选择 - 但只能选择一个“二级”元素。作为“二级”显示源的数组是myseldata in second-level-items.js。

这里的意图是，一旦进行了“二级”选择，就会出现一个滑块，以更改作为所选数组元素的特定对象的 .value 属性。

我最初的问题（这就是我开始这篇文章/示例的原因）是：

• 如何确保每当更改滑块时，值都会在二级和一级显示中更新？

...但是，由于我以外的原因，这实际上在这个 gist.run 示例中确实有效（但它在我的实际项目中仍然不起作用，这迫使我想出这个示例开始）。此外，它仅在一定程度上起作用，因为在首先加载示例页面时，在进行第一级和第二级选择之后，然后更改滑块，.value 将在第一级和第二级显示中更新。但是，一旦我尝试在第二级取消选择 - 或在第二级更改选择 - 然后更新就会停止。所以，我想这个问题仍然存在......

• 进行第二级选择后，在第二级取消选择（通过单击切换）不会移除滑块；我怎么能让它表现得那样？

1234563当滑动停止时）。如何在滑块滑动时同时更新一级和二级显示？

最后 - 这是在 Aurelia 中最好地解决此类问题的方法吗？那就是 - 我目前在first-level-items.js 中有一个数组； first-level-items.js 然后有一个对second-level-items.js 的单例引用，因此它可以在其中调用一个方法，以更改第二级数组的filtered 副本，然后用作第二级显示的源还有滑块...有没有更好的组织方式？

Answer 1

男孩，这很痛苦，但这是我认为的解决方案：

• https://gist.run/?id=c09fea3b82a9ebc41e0a4c90e8665b04

这里有一些注意事项：

• 显然，在滑块的input 元素上应用if.bind 或show.bind 有问题 - 相反，input 元素应该放在封闭的div 中，而div 应该已申请if/show.bind
• 此外，不应使用 if.bind，因为它会重新实例化滑块元素 - 使用 show.bind 这样我们就可以在开始时获得对滑块小部件的引用，即使它被隐藏了
• 看起来，在attached() 中使用TaskQueue 是在开始时获得对滑块的引用的唯一方法
• 一旦我们有了对小部件的引用，只要它们发生变化，就在每个二级元素上重新应用它
• 不要将 this.myselChanging 设置为 null 以指定滑块没有目标（仅指望适当隐藏滑块）
• 对于连续更改 (onSlide)，只需在处理程序中使用 this.myselChanging.value = e.value; - 第一级和第二级值都会更改

除此之外，似乎数组是通过引用复制的，因此多级更新无需进一步干预即可发生...

尽管如此，我仍然很想知道这样做的正确方法是什么...