KO计算不更新UI

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如何运作:

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

2. 当您的求值程序函数运行时,KO会记录您的求值程序读取值的任何可观察对象(或计算的可观察对象).

3. 当您的求值程序完成后,KO会为您触及的每个可观察对象(或计算的可观察对象)设置订阅.订阅回调设置为使评估程序再次运行,将整个过程循环回到步骤1(处理任何不再适用的旧订阅).

4. KO通知任何订户有关您计算的可观察量的新值.

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

由于状态的UI更改取决于ParticipationStatus更改,这意味着此属性需要是数组中每个对象内的可观察元素,否则当状态发生更改时,计算机将无法知道该更改并且更新UI.