将自定义JavaScript模型映射到具有observable的Knockout模型

Posted 2021-05-05

我从服务器收到一个模型，它是一个（导航）菜单。所以它有1个根项，带有一系列菜单项。根项目也有标题。 menuitems数组是一个项目数组，带有标题和linkItems数组（具有控制器，动作，css等属性的对象）

我在我的knockout viewmodel中有相同的模型，但是所有的数组和属性都是可观察的数组/字符串/整数。

现在，当我这样做

vm.menuitems(menuitemsfromserver)我有一个带有可观察数组的菜单，但树中“下方”或“下方”的所有项目都是“普通”对象而不再是可观察对象。

我见过map方法，但我无法理解它。模型是相同的，唯一的区别是一个由可观察（-arrays）和另一个纯javascript对象组成。

答案

有一个专门为这种情况制作的插件：http://knockoutjs.com/documentation/plugins-mapping.html

从其文件：

// Every time data is received from the server:
ko.mapping.fromJS(data, viewModel);

对象的所有属性都将转换为可观察对象。如果更新将更改该值，它将更新observable。

数组被转换为可观察的数组。如果更新会更改项目数，则会执行相应的添加/删除操作。它还会尝试使顺序与原始JavaScript数组保持一致。

在您的情况下，代码看起来像：

ko.mapping.fromJS(menuitemsfromserver, vm.menuitems)

它将遍历所有属性和所有menuitems数组，并将它们转换为可观察对象。

插件最近没有主动维护，如下所示：https://github.com/SteveSanderson/knockout.mapping，但为此目的，它仍然是一个有用的代码。