我从 ASP.NET Web API 获取一个 json 对象数组,并将其映射到我的 knockout View 模型 (ko.observablearray
)。将模型绑定(bind)到文档时,出现“无法处理绑定(bind)”错误。
这是因为我从 API 获取的 json dto 没有定义 Editable
属性。如何在绘制 map 时即时添加它?默认情况下应为 false
。
代码如下:
var Accessory = function (id, leftOnPatient, reject, amount, patchNumber, additionalInfo, editable) {
var self = this;
self.Id = ko.observable(id);
self.LeftOnPatient = ko.observable(leftOnPatient);
self.Reject = ko.observable(reject);
self.Amount = ko.observable(amount);
self.PatchNumber = ko.observable(patchNumber);
self.AdditionalInfo = ko.observable(additionalInfo);
self.Editable = ko.observable(editable);
}
function MedicinesAndAccessoriesViewModel() {
var self = this;
self.Accessories = ko.observableArray([]);
self.error = ko.observable();
function getAllAccessories() {
ajaxHelper(accessoriesUri, 'GET').done(function (data) {
ko.mapping.fromJS(data, {}, self.Accessories);
});
};
getAllAccessories();
};
var vm = new MedicinesAndAccessoriesViewModel();
ko.applyBindings(vm, document.getElementById("medicinesAndAccessoriesTab"));
HTML:
<ol class="list-group list_of_items padding-top-15" data-bind="foreach: Accessories">
<li class="list-group-item">
<div class="container-fluid">
<div class="col-md-4">
<span data-bind="text: Id, visible: !Editable()"></span> //Here I get the error
....
...
..
.
那么,如何为从 API 加载的每个 Accessory
客户端定义 Editable(false)
属性?我从 API 加载的 dto 获得的所有其他属性。可以在映射时以某种方式完成吗?
最佳答案
您目前根本没有在任何地方使用 Accessory
构造函数,该单词在代码片段的定义中仅出现一次...
您需要利用映射定义并告诉它正确映射 json 的该部分,例如:
function getAllAccessories() {
ajaxHelper(accessoriesUri, 'GET').done(function (data) {
var mappingRules = {
'accessories': {
create: function(options) {
return new Accessory(
options.data.id,
options.data.leftOnPatient,
options.data.reject,
options.data.amount,
options.data.patchNumber,
options.data.additionalInfo,
options.data.editable);
}
}
};
ko.mapping.fromJS(data, mappingRules, self.Accessories);
});
};
这应该已经确保了 Editable
observable 存在。您可以尝试使用 !!
将其强制转换为 bool 值,以防万一:
self.Editable = ko.observable(!!editable);
PS。我建议通过将参数数量减少到一个(例如 data
或 dto
)来使构造函数稍微简单一些,以便 返回 new Accessory(options.data )
将在上面的代码片段中执行。
关于javascript - 如何使用附加属性扩展映射的 knockout View 模型 "on the fly"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34659005/