复制相同值两次时，可写计算变量不读取值

Posted 2023-03-27

【中文标题】复制相同值两次时，可写计算变量不读取值

【英文标题】：Writable computed variables does not read value when copying same value twice

【发布时间】：2019-02-28 00:37:54

【问题描述】：

我正在将输入格式化为货币并使用可写计算变量将值更新回文本框。

例如我有一个值 1234.12

我正在从记事本复制值并将其粘贴到文本框中，在选项卡上它正在点击读取功能并格式化为货币并以 1,234 美元的形式写回文本框。 当我粘贴相同的值 1234 时，它不会被读取，而是直接按原样写入文本框，在标签上显示为 1234。

我在js中也看到过这个问题。

如果我多次粘贴相同的值，您知道如何格式化该值吗？

【问题讨论】：

复制相同的值不会触发任何更改...但是这里的一些代码会有所帮助

【参考方案1】：

您可以使用 notify: "always" 扩展器来确保您的数据始终被格式化。

在下面的例子中：

_backingValue 包含 "1234" 当在<input> 中输入"1234" 时，计算的写入 "1234" 到_backingValue 在正常情况下，_backingValue 将

不会

通知任何订阅者值更改，因为"1234" === "1234。 然而，因为我们明确告诉它总是触发valueHasMutated“事件”，它确实通知它的订阅者。 formattedValue 的 read 属性依赖于 _backingValue。 因为_backingValue通知我们它已经改变了，格式化功能会再次运行，输出"1234$"。 在正常情况下，formattedValue 将

不会

通知任何订阅者值更改，因为"1234$" === "1234$"。然而，由于扩展，valueHasMutated 再次被触发。 <input>'s 值绑定接收更新并将"1234$" 呈现到屏幕上。

const _backingValue = ko.observable("1234")
  .extend( notify: "always" );

const formattedValue = ko.computed(
  read: () => _backingValue().replace(/\$/g, "") + "$",
  write: _backingValue
).extend( notify: "always" );


ko.applyBindings( formattedValue );

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<input data-bind="value: formattedValue">

【讨论】：

非常感谢。这真的很有帮助，而且你解释这些东西也很慷慨。再次非常感谢