Knockout.js：里面有 ObservableArrays 的 ObservableArray？答案

【问题标题】：Knockout.js : ObservableArray with ObservableArrays inside?Knockout.js：里面有 ObservableArrays 的 ObservableArray？
【发布时间】：2016-03-30 22:25:43
【问题描述】：

我正在使用这个名为 Dragula 的插件，它需要一个 ObservableArray 作为数据源..

HTML/敲除绑定

<div class="widget-container">
                <div class="widget-content visible" id="team-setup">
                    <div class="header">
                        <p>Lagoppsett</p>
                        <p></p>
                    </div>

                    <div class="col-sm-12">
                        <div class="row">
                            <div class="widget-container">
                                <div class="col-xs-6 widget-content visible">
                                    <div class="header">
                                        <p>Tilgjengelige spillere</p>
                                        <p></p>
                                    </div>
                                    <div class="player-card-container-mini" data-bind="dragula: { data: availablePlayers, group: 'playerz' } ">

                                        <div class="player-card-mini">
                                            <div class="player-card-left">
                                                <div class="player-avatar" style="margin-left: 85%;">
                                                    <img src="Content/Images/player-female.png" id="imgAvatar" runat="server" />
                                                    <div class="player-shirt-no" data-bind="text: ShirtNo"></div>
                                                </div>
                                            </div>
                                            <div class="player-card-subtext">
                                                <div class="player-text">
                                                    <div class="player-card-header-small" data-bind="text: PlayerName"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                                <div class="col-xs-6 widget-content visible">
                                    <div class="header">
                                        <p>Lag</p>
                                        <p></p>
                                    </div>
                                    <div data-bind="foreach: teamsetup">
                                    <div data-bind="foreach: SubTeams">
                                        <h1 data-bind="text: TeamSubName"></h1>
                                        <div class="player-card-container-mini" data-bind="dragula: { data: Players, group: 'playerz' } " style="border: 1px solid red; min-height:200px">

                                            <div class="player-card-mini">
                                                <div class="player-card-left">
                                                    <div class="player-avatar" style="margin-left: 85%;">
                                                        <img src="Content/Images/player-female.png" id="img1" runat="server" />
                                                        <div class="player-shirt-no" data-bind="text: ShirtNo"></div>
                                                    </div>
                                                </div>
                                                <div class="player-card-subtext">
                                                    <div class="player-text">
                                                        <div class="player-card-header-small" data-bind="text: PlayerName"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                        </div>
                    </div>
                    <div style="clear:both">&nbsp;</div>
                </div>
            </div>

敲除代码：

var TeamSetupViewModel = function () {
    var self = this;
    self.teamsetup = ko.observableArray();
    self.availablePlayers = ko.observableArray();
    self.testPlayers = ko.observableArray();
}
var model = new TeamSetupViewModel();

ko.applyBindings(model, document.getElementById("team-setup"));

var uri = 'api/MainPage/GetTeamSetup/' + getQueryVariable("teamId");

$.get(uri,
    function (data) {
        model.teamsetup(data);
        model.availablePlayers(data.AvailablePlayers);
        model.testPlayers(data.AvailablePlayers);
        console.log(data);
    }, 'json');

});

问题是......我在顶部节点有一个 ObservableArray，我确实需要在层次结构中更靠下的 ObservableArrays。

model.availablePlayers 工作正常，但是当通过 teamsetup -> SubTeams -> Players 访问 html/ko foreach 循环中的其他玩家时，它不起作用，因为 Players 不是 ObservableArray . （可能有 1 到 7 个子团队与玩家）。

那么我怎样才能使每个 SubTeams 中的 Players 成为 ObservableArray 呢？

数据结构见图片：

【问题讨论】：

你能把你的观点展示在你拥有所有 foreach 的地方吗
你考虑过 Knockout 映射插件吗？
@Matt.k ：问题已更新为 HTML。
@Neps : 从来没用过 :) 这对解决这个问题有帮助吗？
它可以帮助您使用与您的数据模型匹配的可观察数组自动创建视图模型。请注意，如果只需要单向数据绑定，常规数组就足够了

标签： javascript knockout.js

【解决方案1】：

您可以使用 Mapping 插件，但如果您只需要玩家，您可以手动完成：

简化您的视图模型：

var TeamSetupViewModel = function () {
    var self = this;
    self.availablePlayers = ko.observableArray();
    self.subTeams = ko.observableArray();
}

从服务器获取数据后，填充视图模型，将每支球队的球员数组转换为可观察的球员数组：

$.get(uri,
    function (data) {
        model.availablePlayers(data.AvailablePlayers);
        model.subTeams(data.SubTeams.map(function(t) { t.Players = ko.observableArray(t.Players); return t; }));
    }, 'json');
});

最后，删除模板中的以下行（及其结束标记） - 不再需要迭代：

<div data-bind="foreach: teamsetup">

... 并在下一行更新属性的名称，所以它是 VM 中的骆驼大小写：

<div data-bind="foreach: subTeams">

【讨论】：

非常感谢 Maciej ！