javascript - knockout .js : ObservableArray with ObservableArrays inside?

Question

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

HTML/Knockout 绑定(bind)

<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>

knockout 码:

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，并且我确实需要层次结构中更靠下的 ObservableArray。

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

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

查看数据结构图像:

Answer 1

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

简化您的 View 模型:

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

从服务器获取数据后，填充 View 模型，将每个团队的球员数组转换为可观察的球员数组:

$.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">