セットアップ: 私のビューモデルには、"items" と呼ばれる JSON (名前と ID のみを持つ) から構築されたアイテムの監視可能な配列があります。また、「selecteditem」と呼ばれる、選択したアイテム (アイテムの完全な詳細が含まれる) だけのオブザーバブルもあります。「items」リストからアイテムをクリックすると、「selecteditem」が入力されます。これにより、別の JSON 応答を介して「itemdetails」に完全な詳細が入力され、それらを編集して変更を保存できるようになります。
進行状況: グリッドのクリックは正しく機能しており、ベンダー 14 をクリックすると、正しい VendorID が取得され、クエリ文字列に /api/vendor/14 として渡されます。
問題: 2 番目の ajax 呼び出し (項目の 1 つをクリックすると起動される) でビューモデルの選択項目部分だけを更新するにはどうすればよいですか。
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>