设置: 在我的viewmodel中,我有一个可观察的项目数组,它由JSON构建(它只有名称和ID),称为“items”。我还有一个名为“selecteditem”的所选项目(它有项目的完整详细信息)的可观察对象。当您单击“项目”列表中的项目时,它应填充“selecteditem”,这将通过另一个JSON回复填充“itemdetails”以及完整详细信息,允许您编辑它们并保存更改。
进度: 单击网格工作正常,如果我单击供应商14,它将获得正确的VendorID并将其作为/ api / vendor / 14传递给查询字符串。
问题: 如何使用第二个ajax调用更新我的viewmodel的selecteditem部分(当你点击其中一个项目时触发)。
KoGrid HTML:
<div class="gridContainer">
<div data-bind="koGrid: {
data: items,
autogenerateColumns: false,
isMultiSelect: false,
displaySelectionCheckbox: false,
selectedItem: selecteditem,
columnDefs: [
{ field: 'VendorID', displayName: 'Vendor ID' },
{ field: 'Name', displayName: 'Vendor Name' }
]}">
</div>
</div>
儿童HTML(现在只有几个字段用于测试):
<div data-bind="foreach: itemdetails">
<span data-bind="text: BusinessContactName"></span><br />
<span data-bind="text: BusinessContactTitle"></span>
</div>
使用Javascript:
<script type="text/javascript">
$(document).ready(function () {
var API_URL = "/api/vendor/";
$.ajax({
type: 'GET',
url: API_URL,
dataType: 'json',
success: function (data) {
/* View Model */
window.viewModel = {
items: ko.mapping.fromJS(data),
selecteditem: ko.observable(),
itemdetails: ko.observable()
};
/* Get Selected Item */
window.viewModel.selecteditem.subscribe(function (newValue) {
if (newValue) {
var param = newValue.VendorID();
$.ajax({
type: 'GET',
url: API_URL + param,
dataType: 'json',
success: function (data2) {
//What to do here??
window.viewModel.itemdetails = ko.mapping.fromJS(data2);
//This shows the correct value
alert(window.viewModel.itemdetails.BusinessContactName());
}
});
}
});
ko.applyBindings(viewModel);
}
});
});
</script>
答案 0 :(得分:2)
看起来你的viewModels itemdetails的设置不正确。
而不是window.viewModel.itemdetails = ko.mapping.fromJS(data2);
使用window.viewModel.itemdetails(ko.mapping.fromJS(data2));