javascript - 检测observableArray内部的可观察变化

剔除文档中有一段说可以创建带有属性为observables的observableArray，但没有一个示例：
http://knockoutjs.com/documentation/observableArrays.html

因此，我想要实现的是向具有observableArray属性的observable添加元素，以检测单击时的状态变化。所以这是我到目前为止的代码

export class Team {
        Name: KnockoutObservable<string>;
        Score: KnockoutObservable<number>;
        ListTeamsArray: KnockoutObservableArray<any>;
        selectedTeam: KnockoutObservable<boolean>;

        constructor(json) {
            var self = this;

            if (json !== null) {
                self.Name = ko.observable(json.Name);
                self.Score = ko.observable(0);
                self.ListTeamsArray = ko.observableArray();
                self.selectedTeam = ko.observable(false);
            }
        }

        addTeam = () => {
            var self = this;
            //Working correctly and I'm declaring "selectedTeam" as an observable with initial value of "false"
            var newTeam = { Name: self.Name(), Score: 0, selectedTeam: ko.observable(false)};
            self.ListTeamsArray.push(newTeam);
        }

        //Here I create a function that is passing a "team" parameter (the one in the array and it's working fine
        teamSelectedFn = (team: Team, event) => {
            var self = this;
            $(".teamPanel").css("background", "none");

            //Loop thru array in knockout to assign selected value, probably there's a better way
            ko.utils.arrayForEach(self.ListTeamsArray(), (item) => {
                if (item.Name === team.Name) {
                    $(event.currentTarget).css("background", "#a4e4ce");
                    item.selectedTeam = ko.observable(true);
                } else {
                    item.selectedTeam = ko.observable(false);
                }
            });

            //just for testing
            ko.utils.arrayForEach(self.ListTeamsArray(), (item) => {
                console.log(item);
                console.log(item.selectedTeam());
            });
        }
    }

这是HTML

<div class="row" id="teamCrud">
    <div class="col-sm-3" >
        <div class="form-group">
            <input class="form-control" data-bind="value: Name" />
            @*<span data-bind="text: Score"></span>*@
            <button data-bind="click: addTeam" class="btn btn-success">Add</button>
        </div>
    </div>
    <div class="col-sm-9">
        Equipos
        <div data-bind="foreach: ListTeamsArray" class="row">
            <div class="col-sm-3">
                <div class="panel panel-default teamPanel" data-bind="click: $parent.teamSelectedFn, style: { border: selectedTeam() ? '2px solid red' : 'none'}@*, style: { background: $data.selectedTeam() ? 'red' : 'none'}*@">
                    <div class="panel-heading" data-bind="text: Name"></div>
                    <div class="panel-body">
                        Score:
                        <p data-bind="text: Score"></p>
                        Seleccino
                        <p data-bind="text: selectedTeam()"></p>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

一切正常，我知道我可以使用剔除更改HTML元素的背景颜色，但是我需要检测依赖项更改。它没有从数组内部的可观察状态中检测到变化。还有什么我需要做的，还是我以错误的方式处理的？

最佳答案

在点击功能中，您将使用新的可观察对象覆盖已绑定的可观察对象。您可能只需要更改功能以更新现有的可观察对象，而不是替换它即可。

teamSelectedFn = (team: Team, event) => {
    var self = this;
    $(".teamPanel").css("background", "none");

    //Loop thru array in knockout to assign selected value, probably there's a better way
    ko.utils.arrayForEach(self.ListTeamsArray(), (item) => {
        if (item.Name === team.Name) {
            $(event.currentTarget).css("background", "#a4e4ce");
            item.selectedTeam(true);
        } else {
            item.selectedTeam(false);
        }
    });