Knockout 仅更新部分视图模型

Question

让我们假设一个来自 JS 的视图模式

var js = { 
            Foo1 : {
                BarA : 'text',
                BarB : 'other text' },
            Foo2 : {
                BarC : 'some text' }}; 

 var vm = ko.mapping.fromJS(js);
  ko.applyBindings(vm);

现在我可以做

vm.Foo1.BarB('hello world');

我也可以做一些事情

var js = { 
            Foo1 : {
                BarA : 'text',
                BarB : 'hello world' },
            Foo2 : {
                BarC : 'some text' }}; 

 ko.mapping.fromJS(js, vm);

这两种情况都会更新绑定到 vm 的任何字段。Foo1.BarB

我想做的是

var foo = {
               BarA : 'text',
               BarB : 'hello world' }; 

     ko.mapping.fromJS(foo, vm.Foo1);

这个不行，我也试过了

vm.Foo1(ko.mapping.fromJS(foo));
//and
vm.Foo1 = ko.mapping.fromJS(foo);

None 个正在工作。

我需要这个，因为在我的真实场景中，我的模型是 return 来自网络服务，更新 Foo1 和 Foo2 也是 returned 并且我不想要太多自定义映射。

Answer 1

显然还有一些神秘的附加参数..

ko.mapping.fromJS(foo, {}, vm.Foo1);

我不知道第二个参数是做什么的，但是如果你使用它，它就可以正常工作。

Answer 2

据我所知，这是不可能的。但是你可以这样做：

var js = { 
            Foo1 : {
                BarA : 'text',
                BarB : 'other text' },
            Foo2 : {
                BarC : 'some text' }}; 

var vm = ko.mapping.fromJS(js);
ko.applyBindings(vm);

//later, after fetching data from the webservice:
//data = {
//   Foo1 : {
//      BarA : 'text',
//      BarB : 'other text' },
//}; note: Foo2 is not defined

ko.mapping.fromJS(data, {}, vm);

映射后，只会更新 Foo1（及其子项）。

Answer 3

您不想进行自定义映射，但考虑到其余 api 可能需要更改，如果您直接依赖 API 结果，请考虑这意味着什么是。

即假设您的 api 结果为：

{
   name: 'Ryan',
   title: 'Developer'
   gender: 'M',
   birthDate: '01-01-1984',
   employeeCode: '0123156'
}

所以你在你的整个标记中使用它和一堆东西，比如：

<label data-bind="text: user.employeeCode"></label>

您的标记中有 100 多个地方都写着字段名称。您在计算的可观察量、函数等中依赖它们。您对该 API.

有 100% 的硬依赖

如果那个 api 被更改或替换，并且返回数据的格式不同，那么您的整个应用程序都会中断，并且您必须修复很多东西。

另一方面，如果您有一个服务层 js 文件为 api 结果创建自定义对象的实例，那么您只需更改服务层即可。

您可以轻松切换 api，而不必更改任何可观察对象、ui 绑定等。您已经在应用程序和它的后端数据之间创建了一个耦合层，您可以交换耦合以更改整个后端。

我知道这不是您问题的答案，但我会重新考虑您的 api 结果映射策略或将其考虑在内。

Knockout 仅更新部分视图模型

Knockout update only part of the viewmodel

knockout-mapping-plugin

knockout.js