为什么我的 ko 计算 observable 在其值更改时不会更新绑定的 UI 元素？

Question

我正在尝试将一个 cookie 包装在一个计算的 observable 中（我稍后会变成一个 protectedObservable），但我在计算 observable 时遇到了一些问题。我认为对计算出的 observable 的更改将被广播到任何绑定到它的 UI 元素。

我创建了the following fiddle

JavaScript：

var viewModel = {};

// simulating a cookie store, this part isnt as important
var cookie = function () {  

    // simulating a value stored in cookies
    var privateZipcode = "12345";

    return {
        'write' : function (val) { privateZipcode = val; }, 
        'read': function () { return privateZipcode; }
    }
}();

viewModel.zipcode = ko.computed({
        read: function () {
            return cookie.read();
        },
        write: function (value) {
            cookie.write(value);
        },
        owner: viewModel
    });

ko.applyBindings(viewModel);?

HTML：

zipcode:
<input type='text' data-bind="value: zipcode"> <br />

zipcode: 
<span data-bind="text: zipcode"></span>?

我没有使用 observable 来存储 privateZipcode，因为它实际上只是在 cookie 中。我希望ko.computed 将提供我需要的通知和绑定功能，尽管大多数examples I've seen 和ko.computed 最终在封面下使用ko.observable。

将值写入我计算的 observable 的行为不应该向绑定到其值的 UI 元素发出信号吗？这些不应该更新吗？

解决方法

我有一个简单的解决方法，我只需在我的 cookie 存储旁边使用 ko.observable 并使用它会触发对我的 DOM 元素的所需更新，但这似乎完全没有必要，除非 ko.computed 缺少信号 / ko.observable 具有的依赖类型功能。

My workaround fiddle，你会注意到唯一改变的是我添加了一个不用作存储的seperateObservable，它的唯一目的是向 UI 发出底层数据已更改的信号。

// simulating a cookie store, this part isnt as important
var cookie = function () {  

    // simulating a value stored in cookies
    var privateZipcode = "12345";

    // extra observable that isnt really used as a store, just to trigger updates to the UI
    var seperateObservable = ko.observable(privateZipcode);

    return {
        'write' : function (val) { 
            privateZipcode = val; 
            seperateObservable(val);
        }, 
        'read': function () { 
            seperateObservable();
            return privateZipcode; 
        }
    }
}();

这是有道理的，并且可以按我的预期工作，因为viewModel.zipcode 依赖于seperateObservable，并且对其进行更新应该（并且确实）通知 UI 进行更新。 我不明白， 是为什么我的ko.computed 上的write 函数调用没有通知UI 更新，因为该元素绑定到ko.computed？

我怀疑我可能不得不在淘汰赛中使用某些东西来手动表示我的ko.computed 已更新，我对此很好，这是有道理的。我只是无法找到一种方法来实现这一点。

Answer 1

sigh，我找到了my exact same problem的人

如果dependentObservables 在写入时不通知订阅者，他们为什么要这样做 甚至懒得看书？它们被添加到 observables 列表中 并订阅了，但是他们永远不会触发更新。那么什么是 订阅它们的意义何在？

Ryan Niemeyer 答案：

我认为对于您的场景，dependentObservables 可能不是 适合工作的工具。设置dependentObservables 来检测 读取函数中的依赖关系，并在任何时候重新评估/通知 这些依赖项发生了变化。在可写的dependentObservable 中， write 函数实际上只是一个拦截写入并允许的地方 您可以设置任何必要的可观察值，以便您的读取功能 将返回正确的值（写通常与读相反 在大多数情况下，除非您正在转换值）。

对于您的情况，我个人会使用 observable 来表示 值，然后手动订阅该 observable 以更新 原始值（您可能无法控制的值）。

就像：http://jsfiddle.net/rniemeyer/Nn5TH/

所以看起来this fiddle 将是一个解决方案

var viewModel = {};

// simulating a cookie store, this part isnt as important
var cookie = function () {  

    // simulating a value stored in cookies
    var privateZipcode = "12345";

    return {
        'write' : function (val) { 
            console.log("updated cookie value with: " + val);
            privateZipcode = val; 
        }, 
        'read': function () { 
            return privateZipcode; 
        }
    }
}();

viewModel.zipcode = ko.observable(cookie.read());

// manually update the cookie when the observable changes
viewModel.zipcode.subscribe(function(newValue) {
   cookie.write(newValue);   
});

ko.applyBindings(viewModel);​

这是有道理的，而且使用起来更简单。总的来说，我不确定将 cookie 视为可观察对象是多么棒的想法，因为服务器可以在 ajax 请求等中对其进行编辑。

Answer 2

尝试使您的内部私人邮政编码成为可观察的。见这里：http://jsfiddle.net/KodeKreachor/fAGes/9/