4

我对淘汰赛还很陌生，我正在尝试使用淘汰赛显示和隐藏引导选项卡。

基本上我有一个计算的可观察量：

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>

从某种意义上说，计算工作正常，当我刷新页面时，正确的选项卡被隐藏了，但我需要它在不刷新的情况下工作。

4

1 回答 1

9

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

关键点：一个 observableArray 跟踪哪些对象在数组中， 而不是这些对象的状态

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

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

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

  1. 每当你声明一个计算的 observable 时，KO 立即调用它的求值函数来获取它的初始值。

  2. 当您的评估器功能运行时，KO 会记录您的评估器读取其值的任何可观察对象（或计算的可观察对象）。

  3. 当您的评估器完成后，KO 会为您接触的每个可观察对象（或计算的可观察对象）设置订阅。订阅回调设置为使您的评估程序再次运行，将整个过程循环回第 1 步（处理任何不再适用的旧订阅）。

  4. KO 通知任何订阅者你计算的 observable 的新值。

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

由于状态的 UI 变化依赖于ParticipationStatus变化，这意味着这个属性需要是数组中每个对象内的一个可观察元素，否则当它的状态变化时，计算将无法知道该变化和更新用户界面。

于 2013-03-27T02:51:28.410 回答