knockout.js 删除只更新视图模型的一部分

vwkv1x7d  于 2022-11-10  发布在  其他
关注(0)|答案(3)|浏览(170)

让我们假设一个来自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);

没有一个是工作的。
我之所以需要这个,是因为在我的真实的场景中,我的模型是从一个Web服务返回的,更新Foo1和Foo2也会返回,我不想有太多的自定义Map。

vu8f3i0k

vu8f3i0k1#

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

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

我不知道第二个参数有什么作用,但是如果你使用它,它就会工作得很好。
https://stackoverflow.com/a/29598785/2968001

hmae6n7t

hmae6n7t2#

据我所知,这是不可能的.但你可以这样做:

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);

Map后,仅更新Foo1(及其子项)。

oalqel3c

oalqel3c3#

您不想进行自定义Map,但考虑到可能需要更改一个rest API,请考虑如果直接依赖API结果,这意味着什么。
例如,假设您的API结果为:

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

所以你可以在你的标记中使用它,比如:
<label data-bind="text: user.employeeCode"></label>
你的标记中有上百个字段名,你在计算的可观察性、函数等方面都依赖它们,你对API有100%的硬依赖。
如果该api发生变化,或者被替换,并且返回的数据格式不同,那么整个应用程序就会崩溃,并且必须修复很多东西。
另一方面,如果您有一个服务层js文件,它为api结果创建自定义对象的示例,那么您所要更改的就是您的服务层。
你可以很容易地切换api,而不必去改变你的任何可观察性,ui绑定,等等。你已经在应用程序和它的后端数据之间创建了一个耦合层,你可以交换耦合来改变整个后端。
我知道这不是你问题的答案,但我会重新考虑你的api结果Map策略或考虑它。

相关问题