检测 observableArray 中的可观察变化答案

【问题标题】：Detect observable change inside observableArray检测 observableArray 中的可观察变化
【发布时间】：2017-12-03 15:11:41
【问题描述】：

在淘汰文档中有一段说您可以创建一个 observableArray，其属性为 observables，但没有这样的示例： http://knockoutjs.com/documentation/observableArrays.html

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

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 元素的背景颜色，但我需要检测依赖项的变化。它没有检测到数组内部可观察对象的变化。我还有什么需要做的吗，或者我处理的方式不对？

【问题讨论】：

标签： javascript typescript knockout.js

【解决方案1】：

在您的 click 函数中，您正在用新的 observable 覆盖绑定的 observable。你可能只需要改变你的函数来更新现有的 observable 而不是替换它。

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

【讨论】：