我正在使用 Knockout.js 处理主详细信息视图。基本上,一切正常,有一个小缺点:每当当前显示在详细视图中的项目发生更改时,主节点不会相应地更新自身。
基本上,我明白为什么会这样:
- 主视图基于 a
ko.observableArray
,因此它只跟踪插入和删除项目。它不会对更新的项目做出反应。 - Whenever an item is selected, it is put into a
ko.observable
which is the base for the detail view. - 更新详细视图后,数组会自动包含正确的数据(因为它使用的是相同的对象),但它不会反映 UI 的更改(因为没有插入或更新任何项目)。
现在的问题是如何以优雅和正确的方式处理这个问题?
我目前可以想到两种可能的解决方案:
- 将数组中的每个项目包装在一个
ko.observable
. 这样,它将检测在详细信息视图中所做的任何更改并相应地更新 UI。 - 或者:使用克隆对象“复制”已编辑的项目
JSON.parse(JSON.stringify(...));
和replace()
数组中的条目。由于现在已经在内部删除并插入了一个对象,因此该数组会检测到更改并更新 UI。
问题:
- 对于大量数据,第一种解决方案并不容易。至少它会减慢一切。
- 第二种解决方案效果很好,但是......嗯,嗯,......简直不好;-)
有更好的想法吗?