敲除js对复杂视图模型的约束限制

I am 3 months into learning KnockoutJS and it has been great so far. However, I am facing an issue with binding. This is the scenario:

我学习KnockoutJS已经有3个月了,到目前为止它还很棒。但是,我面临绑定问题。这是场景:

I am using MVC with KO.

我正在使用MVC和KO。

MVC model is passed down to the view, converted into a knockout object and pushed into the viewModel variable:

MVC模型向下传递给视图,转换为knockout对象并推入viewModel变量:

var data = ko.mapping.fromJS(@Html.Raw(Json.Encode(Model))); var viewModel = new HP.ViewModels.CertificationPathViewModel(data); ko.applyBindings(viewModel);

var data = ko.mapping.fromJS(@ Html.Raw(Json.Encode(Model))); var viewModel = new HP.ViewModels.CertificationPathViewModel(data); ko.applyBindings(视图模型);
Within viewModel, I reference the MVC model as self.data:

在viewModel中,我将MVC模型引用为self.data:

ViewModels.CertificationPathViewModel = (function (data) { var self = ViewModels.BaseEntityViewModel.apply(this, [data]); // some other code return { Data: self.Data, }; }

ViewModels.CertificationPathViewModel =(function(data){var self = ViewModels.BaseEntityViewModel.apply(this,[data]); //其他一些代码返回{Data:self.Data,};}

ViewModels.BaseEntityViewModel = (function (data) { var self = this; self.data = ko.observable(data); // other code return { Data: self.data, }; }

ViewModels.BaseEntityViewModel =(function(data){var self = this; self.data = ko.observable(data); //其他代码返回{Data:self.data,};}
On the view, I data-bind like this:

在视图上,我像这样数据绑定:

<div id="drpControl" data-bind="CustomDropdown: Data().BusinessUnits.SelectedGroup, optionSettings: { CustomOptions: Data().Units.Groups, CustomOptionsCaption: '-- Select Group --' }"></div>

I try to update the self.data after an ajax call. I return the entire MVC model object and attempt to replace self.data like this :

我尝试在ajax调用后更新self.data。我返回整个MVC模型对象并尝试替换self.data,如下所示:

self.data(updatedModel)

My expectation is that KO will take care of the update and no extra binding is needed. It works great for simple binding (ex. Value: Data().Something) but it doesn't work for complex binding (ex. value: Data().BusinessUnits.SelectedGroup ).

我的期望是KO将负责更新,不需要额外的绑定。它适用于简单绑定(例如Value:Data()。Something)但它不适用于复杂绑定(例如:value:Data()。BusinessUnits.SelectedGroup)。

The controls that have complex binding are still bound to the old model, so KO doesn't know what to pass back next time I submit an ajax request.

具有复杂绑定的控件仍然绑定到旧模型,因此KO不知道下次提交ajax请求时要传回的内容。

Is this a limitation of KO, or I am not doing something properly?

这是KO的限制,还是我做得不好?

Thanks

1 个解决方案

#1

the ko.mapping plugin changes every property on self.data into an observable. During your update, you need to remap the updated data.

ko.mapping插件将self.data上的每个属性更改为一个observable。在更新期间,您需要重新映射更新的数据。

Since you didn't actually post your code, just unformatted snippets I can't help a whole bunch, but you should start by changing this line: self.data(updatedModel) to this:

由于您实际上没有发布您的代码,只是未格式化的代码段我无法帮助一大堆,但您应该首先更改此行:self.data(updatedModel)to this:

ko.mapping.fromJS(updatedModel, self.data);

see the Knockout.JS mapping documentation

请参阅Knockout.JS映射文档

Protip for stack overflow - include your full code, to the extent that it's possible. Also, if you can, make a jsfiddle that reproduces your problem.

堆栈溢出的原型 - 包括您的完整代码,尽可能的。此外,如果可以,请制作一个可以重现问题的jsfiddle。

#1