Aurelia JS - 多级绑定/更新？

时间：2017-02-27 13:41:41

标签： javascript aurelia aurelia-binding

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

这就是Chromium的样子：

gistrun

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

然后在“第二级”（绿色轮廓）中再次显示在“第一级”中选择的那些项目;这里显示了相同的名称和值信息，尽管有点不同。这里也可以切换元素选择 - 但是只能选择一个“二级”元素。作为“二级”显示源的数组是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副本，然后将其作为源用于二级显示和滑块...是否有更好的方法来组织它？

1 个答案:

答案 0 :(得分：0)

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

以下是一些注释：

  • 显然，在滑块的if.bind元素上应用show.bind或input会出错 - 相反，input元素应放在封闭的div元素中div 1}}，而if/show.bind应该if.bind已应用
  • 此外，不应使用show.bind，因为它重新实例化了滑块元素 - 使用attached()因此我们可以在开始时获得对滑块小部件的引用，即使它已被隐藏< / LI>
  • 看起来，在this.myselChanging中使用TaskQueue是在开始时获取滑块引用的唯一方法
  • 一旦我们获得对窗口小部件的引用，只要它们发生更改，就会在每个第二级元素上重新应用
  • 不要将onSlide设置为null以指定滑块的目标（只需依靠隐藏滑块）
  • 要进行持续更改（this.myselChanging.value = e.value;），只需在处理程序中使用@Override public void onLoadFinished(Loader<Cursor> loader, Cursor cursor) { if (cursor.moveToFirst()) { int textColumnIndex = cursor.getColumnIndex(NoteEntry.COLUMN_TEXT); String content = cursor.getString(textColumnIndex); mEditView.setText(content); } - 第一级和第二级值都将更改

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

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

相关问题
最新问题