knockout.js - 在这种情况下，Knockoutjs 不会更新 UI

Question

我对 KO 比较陌生(两天前开始)并且正在尝试一些简单的例子。目前，我对这段代码有疑问。

<div id="idChangeStyle">
    <span data-bind="style: { background: GetAge() < 18 ? 'red':'white'}">Enter Your Age:</span>
    <input type="text" data-bind="value: GetAge"></input>
</div>

function ageViewModel() {
    var self = this;
    self.age = ko.observable(18);
    self.GetAge = ko.computed({
        read: function () {
            return self.age();
        },
        write: function (value) {
            value = parseInt(String(value).replace(/[^\d]/g, ""));
            if (isNaN(value))
                self.age(18);
            else
                self.age(value);
        }
    });
};
ko.applyBindings(new ageViewModel(), document.getElementById('idChangeStyle'));

http://jsfiddle.net/WJZqj/

基本上，该应用程序采用单个输入(年龄)。我正在使用可写计算 observable 将输入解析为 INTEGER 并在解析其 NaN 后尝试将年龄设置为其默认值
即 18。此外，我在 html 上有一个简单的逻辑，如果年龄低于 18，我将 span 的背景更改为红色。

在正常情况下它工作正常，这是我遇到问题的时候: -

Case 1:
Current Input: 18 (initial case) 
enter *4* then tab //works
enter *a* then tab //work (defaults to 18) 
enter *a* then tab //doesn't work

case 2:
current input: 18 
enter *a *then tab* //*doesn't work

我检查了 knockout 代码，看看在运行以下代码时会发生什么情况:-

if(isNaN(value))
   self.age(18);

..在以下行中:-

// Ignore writes if the value hasn't changed
if ((!observable['equalityComparer']) || !observable['equalityComparer'](_latestValue, arguments[0])) { 

_latestValue和 arguments[0]具有相同的值 (18)，所以它什么也不做。
由于年龄值没有变化，现在 viewmodel 属性和 UI 不同步。

这是因为我做错了吗？

Answer 1

问题在于，如果您为 observable 输入相同的值，它不会认为这是值的变化，也不会通知订阅者。如果连续多次进入错误状态，18本来是设置的年龄，然后再次设置，不会发生更改事件。

话虽如此，要解决此问题，您必须手动通知订阅者。您可以通过调用 valueHasMutated() 来完成。在可观察到的。

self.GetAge = ko.computed({
    read: function () {
        return self.age();
    },
    write: function (value) {
        value = parseInt(String(value).replace(/[^\d]/g, ""));
        if (isNaN(value)) self.age(18);
        else self.age(value);
        self.age.valueHasMutated(); // notify subscribers
    }
});