Aurelia JS - 多级绑定/更新？

Question

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

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

这就是Chromium的样子：

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

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

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

我原来的问题（这就是我开始这篇文章/例子的原因）是：

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

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

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

• 更新只发生在滑块的onChange上 - 基本上，当您拖动和滑动时，此组件会发出onSlide ，但只有在释放鼠标时（即滑动停止时）才会生成onChange 。 如何在滑块滑动时更新第一级和第二级显示？

最后 - 这是Aurelia最好解决这类问题的方法吗？ 那是 - 我目前在first-level-items.js有一个数组; first-level-items.js然后有一个对second-level-items.js的单例引用，所以它可以调用其中的方法，在第二级更改数组的filter副本，然后作为源用于二级显示和滑块......有更好的方法来组织它吗？

Answer 1

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

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

以下是一些注意事项：

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

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

虽然，仍然想知道这样做的正确方法是什么......