手动同步VM和UI

时间:2019-07-13 10:18:18

标签: knockout.js

??在某些情况下是否可以更新ViewModel数据,并防止在要手动更新UI之前重新绘制/更新UI? (不基于以毫秒为单位的固定时间延迟)

想象一下这种情况:

1)您有一个已排序的observableArray,它在屏幕上绘制为典型的移动列表,其中包含多个列表项,每行一个。

2)列表已重新排序,并手动执行一些精美的动画以显示从每个项目的初始位置到其结束位置的过渡

3)动画结束后,您希望重新绘制UI(将UI与ViewModel同步)。


我正在运行它,但是它以一种非非常有效的方式运行,但是我对此并不感到骄傲,因此我对实现它的更好方法感兴趣:

1)我有一个已排序的observableArray,它在屏幕上绘制为具有多个列表项的典型移动列表,每行一个。

2)我计算所有项目的位置将在新订单标准之后,因此我执行了从其初始位置到其期望位置的CSS转换(尚未对底层observableArray进行任何更改,我手动进行了更改,而无需更改数据以防止UI自动更新)

3)动画结束后,我对observableArray进行排序,并按预期自动将其重新绘制在屏幕上。由于用于排序的标准与用于获取所有列表项的结束位置的标准相同,因此不会出现闪烁,因为即使在KnockOut绑定之前更新了严格的UI,每个项的新位置也相同。


此技术有效,但我想做类似的事情:

1)如果ViewModel发生更改(至少与列表相关的foreach绑定),则防止UI自动更新temporallay

2)对observableArray项目进行排序,这样我就可以获得每个项目的最终位置(其索引)。我希望UI不会重绘,因为它暂时被禁用,等待我的手动update()调用

3)使用新的列表项索引执行CSS过渡

4)CSS过渡结束后,请再次更新ViewModel或手动调用.update()函数以将视图与底层数据同步(即使顺序是相同的)

??有任何帮助吗?提前谢谢

0 个答案:

没有答案