ノックアウトjsを使い始めたばかりで、動的なツリービューを構築しようとしています. 簡単にするために、問題に関係のないものはすべて削除しました。ツリービューはネストされた UL タグで構成されます。
html:
<div id="pnlDestinations">
<ul data-bind="template: { name: 'GroupTemplate', foreach: Groups }"></ul>
</div>
<script type="text/html" id="GroupTemplate">
<li>
<a href="#" data-bind="text: GroupName, click: function() { RetrieveDestinations($data); }"></a>
<ul data-bind="template: { name: 'DestinationTemplate', foreach: Destinations }"></ul>
</li>
</script>
<script type="text/html" id="DestinationTemplate">
<li>
<a href="#" data-bind="text: DestinationName"></a>
</li>
</script>
コード:
function ViewModel(groups) {
Groups = ko.mapping.fromJS(groups);
RetrieveDestinations = function (group) {
$.getJSON('GetDestinations?id=' + group.GroupId(), function (data) {
group.Destinations(ko.mapping.fromJS(data));
});
}
}
$(function () {
$.getJSON("GetGroups", function (data) {
ko.applyBindings(new ViewModel(data));
});
});
したがって、ツリービューを 2 つのレベル (2 つのテンプレートを使用) でバインドしていますが、「GetGroups」で 1 つのレベルのみを取得しています (Destinations は存在しますが、空の配列です)。
グループがクリックされると、宛先が RetrieveDestinations() メソッドで取得され、グループ内の空の配列を置き換える必要があります。ただし、ツリービューには表示されません。
「GetGroups」に宛先を含めると、すべてが正しくレンダリングされるため、ツリービューのバインディングは正しいはずです。