在使用 KnockoutJS 从 API 加载字段后,将字段添加到 observableArray
Add field to observableArray after it has been loaded from API using KnockoutJS
我有一个名为文档的可观察数组,我从API调用的结果中加载了JSON。然后,我使用文档加载当前选定的文档。代码如下:
self.documents = ko.observableArray();
self.document = {
DocID: ko.observable(),
DocName: ko.observable(),
isDocumentEdit: ko.observable(false)
}
function populateDocumentLocations() {
ajaxHelper(url + '/api/Documents/' + self.businessList.busID().busID, 'GET').done(function (data) {
self.documents(data);
});
}
function ajaxHelper(uri, method, data) {
return $.ajax({
type: method,
url: uri,
dataType: 'json',
contentType: 'application/json',
data: data ? JSON.stringify(data) : null
}).fail(function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
});
}
API 返回的两个属性是 DocID 和 DocName。这一切都很好用。我在文档中添加了第三个字段(如上所述),"isDocumentEdit",以便我知道用户是否单击了"编辑"按钮(以相应地更改 GUI)。
但是,isDocumentEdit 的值仍为"未定义"而不是 false。
我还尝试遍历"文档"并为每个元素添加"isDocumentEdit = false",但这不起作用。
是否可以在加载后向可观察量添加另一个参数?或者有没有办法在它进行 API 调用时加载它(这是我尝试循环并添加但没有工作的地方)?
当数据从 ajax 调用返回时,需要将其映射到包含可观察量的模型。
首先声明文档视图模型:
function Document (document) {
var self = this;
self.DocID = ko.observable(document.DocID);
self.DocName = ko.observable(document.DocName);
self.isDocumentEdit = ko.observable(false);
}
然后,您可以使用 jQuery $.map 函数将 json 响应映射到您的文档:
function populateDocumentLocations() {
ajaxHelper(url + '/api/Documents/' + self.businessList.busID().busID, 'GET').done(function (data) {
var mappedDocuments = $.map(data, function(document) { return new Document(document) });
self.documents(mappedDocuments);
});
}
这也在淘汰教程中,这是一个很好的参考:http://learn.knockoutjs.com/#/?tutorial=loadingsaving
相关文章:
- 使用单个文本框向多个字段添加严格搜索
- WooCommerce-根据自定义字段添加费用
- 向使用jQuery加载DOM后添加的字段添加不受限制的文本输入DatePickers
- j查询检查复选框是否被选中,然后向输入字段添加值
- 使用 javascript 将各种输入字段添加到一起
- 使用 jQuery 将字段添加到表中的 HTML 表单中
- 如何从动态输入字段添加数字
- Extjs 3.3动态地将字段添加到表单中,并设置它们的标签宽度
- JQuery:如何检查复选框是否被选中并向字段添加属性
- "未捕获的类型错误:未定义的不是函数“;当向输入字段添加值时
- Bootstrap typeahead为隐藏字段添加值
- 使用chrome扩展(HTML、CSS、JavaScript)向输入字段添加可点击的图标/按钮
- 正在向输入字段添加自定义验证
- 使用javascript向输入字段添加值
- 如何将自定义字段添加到Json结果-ASP.NET MVC
- 向选定的弹出字段添加逗号
- Accounts.onCreateUser 未将字段添加到 Meteor 的用户集合中
- 如何将自定义字段添加到 dhtmlxScheduler
- 根据 JavaScript 中的选中复选框将字段添加到页面
- 如何从开始日期中的单独字段添加天数/周,以在日期选择器中获取结束日期