Question

我仍然是淘汰赛的新手，我正在尝试使用淘汰赛显示和隐藏引导标签。

基本上我有一个计算的observable：

self.isActive = ko.computed(function () {
            var selected = ko.utils.arrayFirst(self.padParticipant(), function (item) {
                return item.ParticipationStatus == 'Active';
            });
            return selected !== null ? true : false;
        });

更新这些标签：

<ul class="nav nav-tabs" id="padTabs">
        <li data-bind="fadeVisible: !isActive()"><a href="#joinPad">Join PAD</a></li>
       <li class="active"><a href="#history">History</a></li>
       <li data-bind="fadeVisible: isActive()"><a href="#update">Update Subscription</a></li>
</ul>

计算机正常工作，因为当我刷新页面时，隐藏了正确的选项卡，但是我需要它才能在不刷新的情况下工作。

Answer 1

除了可观察数组的规则之外，当您使用计算的observable时，问题还与理解Knockout框架中发生的事情有关。首先让我们看一下关于可观察数组的注释：

关键点：observableArray跟踪数组中的对象   不是那些对象的状态

简单地将一个对象放入一个observableArray并不能完全实现   该对象的属性本身是可观察的。当然，你可以   如果你愿意，可以观察这些属性，但那是一个   独立选择。 observableArray只跟踪它的对象   保持，并在添加或删除对象时通知侦听器。

这是你在这行代码中犯的同样的警告错误，因为这不是一个可观察的，而只是数组中对象的一个属性，： return item.ParticipationStatus == 'Active';

此外，我们需要了解计算的observable如何运作：

每当您声明一个计算的observable时，KO立即调用其求值器函数来获取其初始值。



当您的评估函数正在运行时， KO会记录您的评估者读取的任何可观察量（或计算的可观察量）   价值。



评估者完成后， KO设置对您触及的每个可观察对象（或计算出的可观察对象）的订阅。该   订阅回调设置为使评估者再次运行，   将整个过程循环回到步骤1（处理任何旧的   订阅不再适用）。



KO通知任何订阅者有关您计算的观察值的新值。

因此，当您创建计算的observable时，为监视更改而创建的唯一订阅是可观察数组self.padParticipant()的订阅。

由于状态的UI更改依赖于ParticipationStatus更改，这意味着此属性需要是数组中每个对象内的可观察元素，否则当状态发生更改时，将无法进行计算以了解该更改并更新UI。

KO计算不更新UI

1 个答案: