Knockoutjsツリービュー遅延読み込み：子ノードが表示されない

Question

Knockoutjsツリービュー遅延読み込み：子ノードが表示されない

私はknockoutjsを使い始めました。私は動的なツリービューを構築しようとしています。簡素化するために、問題に関連していないものはすべて削除しました。ツリービューはネストされたULタグで構成されます。

html：

<div id="pnlDestinations">
    
</div>

<script type="text/html" id="GroupTemplate">
    
        
        
    
</script>

<script type="text/html" id="DestinationTemplate">
    
        
    
</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つのレベルを取得しています。

グループがクリックされると、宛先はRetrieveDestinations（）メソッドで取得され、グループ内の空の配列を置き換える必要があります。しかし、彼らは私のツリービューに表示されません。

"GetGroups"に宛先を含めると、すべてが正しくレンダリングされるため、ツリービューのバインディングは正しいはずです。

1

追加された 06 2月 2012 〜で 03:28 著者 NetWave

ビュー: 4

源

ru fr es pt de ar

1 答え

著者 RP Niemeyer · Answer 1 · 2012-02-07T12:55Z

ko.mapping.fromJS when given an array is going to turn it into an observableArray.

したがって、 group.Destinations（ko.mapping.fromJS（data））を実行するときは、 Destinations observableArrayの値をobservableArrayと同じに設定します。基本的には、これは2回ラップされたことを意味します。

You could do something like group.Destinations(ko.mapping.fromJS(data)())

jsFiddleは現在のところ保存を許可していませんが、ここでは、マッピングプラグインを使用して送り先を更新するためのコードを簡略化しています（AJAXをシミュレートするためのsetTimeouts）。

<div id="pnlDestinations">
    
        
            
            
                
                    
                        
            
        
    
</div>

ViewModel：

function ViewModel(groups) {
    this.Groups = ko.mapping.fromJS(groups);
    this.RetrieveDestinations = function (group) {
        setTimeout(function() {
            //fake data
            var name = group.GroupName(),
                data = [ 
                    { DestinationName: name + "-1" }, 
                    { DestinationName: name + "-2" },
                    { DestinationName: name + "-3" }
                ];
            ko.mapping.fromJS(data, {}, group.Destinations);
            group.Destinations.push({ DestinationName: "new" });
        }, 100);
    };
}

$(function() {
    setTimeout(function() {
        var data = [
            { GroupName: "Group1", Destinations: [] },
            { GroupName: "Group2", Destinations: [] },
            { GroupName: "Group3", Destinations: [] }
            ];
        ko.applyBindings(new ViewModel(data));
    }, 100);     
});