jquery - Knockoutjs TreeView 延迟加载: child nodes not showing

Question

我刚刚开始使用knockoutjs，我正在尝试构建一个动态 TreeView 。为了简化，我删除了与问题无关的所有内容。 TreeView 将由嵌套的 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));
    });
});

因此，我将 TreeView 绑定(bind)在两个级别(使用 2 个模板)，但我只检索“GetGroups”中的一级(目的地存在，但是一个空数组)。

单击组时，将在 RetrieveDestinations() 方法中检索目标，并且应替换组中的空数组。但是，它们没有出现在我的 TreeView 中。

TreeView 的绑定(bind)应该是正确的，因为如果我将目的地包含在“GetGroups”中，则所有内容都会正确呈现。

Answer 1

ko.mapping.fromJS 当给定一个数组时，会将其转换为 observableArray。

因此，当您执行 group.Destinations(ko.mapping.fromJS(data)) 时，您将 Destinations observableArray 的值设置为等于 observableArray。基本上，这仅意味着它被包裹两次。

你可以做类似group.Destinations(ko.mapping.fromJS(data)())

的事情

jsFiddle 目前不允许保存，但这里是您的代码简化为使用映射插件来更新目的地(setTimeouts 来模拟 AJAX):

<div id="pnlDestinations">
    <ul data-bind="foreach: Groups">
        <li>
            <a href="#" data-bind="text: GroupName, click: $root.RetrieveDestinations"></a>
            <ul data-bind="foreach: Destinations">
                <li>
                    <a href="#" data-bind="text: DestinationName"></a>
                </li>        
            </ul>
        </li>
    </ul>
</div>

View 模型:

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);     
});