KO计算属性不更新UI

Question

我是一名有用的助手，可以为您翻译文本。

我还相对于knockout比较新，正在尝试使用knockout显示和隐藏bootstrap标签页。

基本上，我有一个计算的可观察对象：

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>

计算工作正确，即当我刷新页面时，正确的选项卡被隐藏，但我需要其在不刷新的情况下正常工作。

- ThreadedLemon

---

所以padParticipant是一个可观察的数组？整个东西都在$(document).ready() {}中设置吗？此外，三元运算符是必需的吗？你可以只说return selected !== null;吗？ - dmoss18

这很奇怪，那个HTML是由什么自动生成的吗？为什么绑定不同，并且在中间的一个缺失了？你能否尝试在fiddle中复制这种行为？ - Kyeotic

padParticipant是一个可观察的数组。是的，整个内容都设置在$(document).ready(function() {}中。 - ThreadedLemon

绑定仅在前两个选项卡上，因为中间的选项卡始终可见。如果第一个选项卡可见，则不应显示第三个选项卡，反之亦然。 - ThreadedLemon

@Slade 您说只有在刷新时它才能正确运行，这意味着某种状态更改应该触发更新 UI 的操作未被执行。您是否期望在可观察数组中对象的 ParticipationStatus 更改时标签可见性也会随之改变？ - Matthew Cox

Answer 1

问题与理解在Knockout框架中使用计算观察值以及遵守可观察数组规则有关。首先让我们看一下有关可观察数组的注意事项：

重点：可观察数组跟踪数组中哪些对象，而不是这些对象的状态。

仅仅把一个对象放入可观察数组中并不会使所有该对象的属性本身都变得可观察。当然，如果您愿意，可以使这些属性变成可观察的，但这是独立选择。可观察数组只是跟踪它所持有的对象，并在添加或删除对象时通知监听者。

这是您在代码行中犯的同样的错误，因为这不是一个可观察对象，而只是数组中一个对象的属性:

return item.ParticipationStatus == 'Active';

此外，我们需要了解计算观察值的操作方式：

每当您声明一个计算观察值时，KO立即调用其求值器函数来获取其初始值。当您的求值函数运行时，KO会记录读取的任何可观察对象(或计算观察值)。当您的求值器完成时，KO会为您接触过的每个可观察对象(或计算观察值)设置订阅。订阅回调被设置为导致您的求值器再次运行，将整个过程循环回到步骤1(处理任何旧的订阅者，这些订阅者不再适用)。KO会通知任何订阅者关于您的计算观察值的新值。

因此，当您创建计算观察值时，仅创建了一个订阅以监视更改的可观察数组self.padParticipant()。

由于UI状态的更改取决于ParticipationStatus的更改，这意味着该属性需要是数组中每个对象中的可观察元素，否则当其状态发生更改时，计算观察器将无法感知该更改并更新UI。

- Matthew Cox