Question

我是KnockoutJS的新手，并认为它是迄今为止的一个很棒的工具:)！但是，我有一个关于计算可观察量的问题，它的问题如下。在http://knockoutjs.com/documentation/computedObservables.html的KnockoutJS页面上，有一个用于格式化价格的示例代码。代码如下。

HTML
<p>Enter bid price: <input data-bind="value: formattedPrice"/></p>

和JS：

JS
function MyViewModel() {
    this.price = ko.observable(25.99);
 
    this.formattedPrice = ko.computed({
        read: function () {
            return '$' + this.price().toFixed(2);
        },
        write: function (value) {
            // Strip out unwanted characters, parse as float, then write the raw data back to the underlying "price" observable
            value = parseFloat(value.replace(/[^\.\d]/g, ""));
            this.price(isNaN(value) ? 0 : value); // Write to underlying storage
        },
        owner: this
    });
}
 
ko.applyBindings(new MyViewModel());

我还复制了代码并在这里放了一个jsFiddle：http://jsfiddle.net/wDvxw/

我的问题是当你输入两次相同的东西时，值不会自动更新。例如：

步骤1：输入25.1234，它变为$ 25.12 第2步：再次输入25.1234。现在没有任何事情发生。

我的猜测是价值没有改变，因此它没有重新格式化。我可以知道如何解决这个问题吗？

谢谢！

Answer 1

这是Knockout中的优化，如果将observable设置为相同的值，它不会触发已更改的事件。

因此，如果您想要始终触发更改事件，则需要使用valueHasMutated方法来手动触发它：

this.price(isNaN(value) ? 0 : value); // Write to underlying storage
this.price.valueHasMutated();

本身它不会修复您的代码，因为在KO 3.0中为ko.computed引入了另一个优化，因此如果计算的值保持不变并且您需要使用，则计算的也不会触发更改.extend({notify: 'always'}) to force the notification of the subscribers.

所以完整的工作计算将如下所示：

this.formattedPrice = ko.computed({
   read: function () {
      return '$' + this.price().toFixed(2);
   },
   write: function (value) {
      value = parseFloat(value.replace(/[^\.\d]/g, ""));
      this.price(isNaN(value) ? 0 : value); // Write to underlying storage
      this.price.valueHasMutated();
    },
    owner: this
}).extend({notify: 'always'});

演示JSFiddle。

KnockoutJS强制计算的Observable重新计算

1 个答案: