私はこのパターンに何度か遭遇しましたが、それを処理するためのエレガントな方法を見つけられませんでした。読み取り専用および編集モードでページを設定しようとしています。
これがhtmlです:
<div>
<span data-bind="text: EventType, if: !EditMode()"></span>
<select data-bind="options: $root.EventTypes, optionsValue: 'Id',
optionsText: 'Name', value: EventType, if: EditMode()"></select>
</div>
<div>
<a href="#" data-bind="click: edit">Edit</a>
</div>
そしてjavascript:
function viewModel(eventJSON) {
var self = this;
self.EventType = ko.observable(eventJSON.EventType);
self.EventTypes = ko.observableArray([]);
self.edit = function() {
$.getJSON("url...", function(eventTypesJSON) {
self.EventTypes(eventTypesJSON);
}
}
}
データバインディングでタイミングの問題が発生しています。applyBindingsが呼び出されると、スパンが正しく設定されます。ただし、編集モードに入ると、ドロップダウンリストが選択した値に設定されず、EventTypeが未定義に設定されます。
これが私が起こっていると思うことです:
- ユーザーが[編集]ボタンをクリックすると、ajax呼び出しが行われてEventTypeが取得されます。
- 選択はデータバインドされています。EventTypes配列が空であるため、EventTypeはnullに設定されます。
- ajax呼び出しが完了し、EventTypesにデータが入力されます。
- EventTypeは以前にnullに設定されていたため、ドロップダウンの最初の項目が選択されます。(たとえば、元のEvenType値は失われます。)
私がしたいこと:
- ユーザーが[編集]ボタンをクリックすると、ajax呼び出しが行われてEventTypeが取得されます。
- ajax呼び出しが完了し、EventTypes配列にデータが入力されます。
- 選択はデータバインドされており、リスト内の正しい項目が選択されています。