奥雷利亚JS -多层次绑定/更新？

Question

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

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

这就是它在铬中的样子：

​

​

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

在“一级”中选择的项目，然后在“二级”(绿色大纲)中再次显示；此处显示相同的名称和值信息，尽管略有不同。这里还可以切换元素选择，但只能选择一个“二级”元素。作为“二级”显示源的数组是myseldata in second-level-items.js。

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

我最初的问题(这就是我开始这个帖子/例子的原因)是：

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

..。然而，出于我以外的原因，实际上在这个gist.run示例(但在我的实际项目中仍然不起作用，这迫使我首先想出了这个示例)中，这是可行的。而且，它只是在某种程度上起作用，也就是说，当首先加载示例页面时，在进行第一级和第二级选择之后，然后更改滑块，.value将在第一级和第二级显示器中更新。但一旦我尝试取消选举在第二级-或改变选择在第二级-然后更新停止。所以，我想这个问题仍然存在.

• 在进行了二级选择之后，在第二级上取消选择(通过单击切换)不会删除滑块；我怎么能让它表现得像那样呢？
• 更新只发生在滑块的onChange上--基本上，当您拖动和滑动时，这个组件会发射onSlide，但是它只会在鼠标释放时(即当滑动停止时)生成onChange。如何在滑块滑动时更新第一级和第二级显示器？

最后--这是奥雷利亚最好解决的问题吗？也就是说-我目前在first-level-items.js中有一个数组；然后first-level-items.js有一个对second-level-items.js的单例引用，因此它可以在其中调用一个方法，以更改第二级数组的filtered副本，然后作为第二级显示和滑块的源.有什么更好的方法来组织这个吗？

Answer 1

孩子，这很痛苦，但我认为解决办法是：

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

以下是一些注意事项：

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

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

不过，我还是很想知道该怎么做.