选择显示/隐藏时的淘汰赛计算重置答案

【问题标题】：Knockout computed reset on select show/hide选择显示/隐藏时的淘汰赛计算重置
【发布时间】：2013-07-30 12:01:14
【问题描述】：

我最近在淘汰赛中遇到了一个奇怪的行为。为了说明，看看这个小提琴：http://jsfiddle.net/77aP3/。

this.myVar = ko.observable();
    this.vars = ko.observableArray(["Dave", "Steve", "Jim"]);
    this.tf = ko.observableArray([true, false]);
    this.show = ko.observable();
    var self = this;

    this.myVarChanger = ko.computed({
        read: function () {
            return self.myVar;
        },
        write: function (value) {
            self.myVar(value);
        }
    });

当您更改第一个选择（Dave、Steve、Jim）中的值时，视图模型中的相应变量会更改。第二个选择改变是否显示第一个。

尝试在第一次选择中选择 Steve 或 Jim，然后将其隐藏（在第二次选择中选择 false）。当您再次显示它时，myVar 的值会自动更改为 Dave（默认值），而不是切换到您选择的那个。如果您不使用 ko.computed 而是使用纯 observable，则不会发生这种情况。

这应该发生吗？我的猜测是，当它显示 select 时，knockout 会重新评估计算变量，就像它通常在程序执行开始时所做的那样。

【问题讨论】：

标签： javascript mvvm knockout.js

【解决方案1】：

您有这种“奇怪”的行为是因为您的读取方法中有一个“错误”。也就是说，您返回的是 myVar 可观察函数本身，而不是它的值。因此，您的选择将被重置为“Dave”，因为 self.myVar 函数在 vars 数组中不存在。

因此，如果您将myVarChanger 的read 方法更改为return self.myVar();，它将产生预期的行为：

this.myVarChanger = ko.computed({
        read: function () {
            return self.myVar();
        },
        write: function (value) {
            self.myVar(value);
        }
    });

演示JSFiddle.

【讨论】：