javascript - 在可观察字段中显示 $ 符号 Knockout

Question

在我的 MVC 项目中，我有一个带有 3 个计算器的 View ，每个计算器都有自己的表单，并且所有 3 个表单都有一个 View 模型， View 模型包含多个计算字段，并且这些字段相互依赖。

我正在寻找向所有字段添加 $ 符号的方法，我只需要它将它显示给客户端，然后在 javascript/KO 代码中删除它(我无法进行计算在计算字段上带有 $ 符号)。

我编写了以下函数:

this.formatCurrency = function (value) {
    if (value && value !== "") {
        value = value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return "$" + value;
    }
}

但是我必须从每个字段调用这个函数:

<span data-bind='text: formatCurrency(improvements())'>

并且还要在计算之前删除 $ 符号。

有人知道如何做到这一点吗？我什么也没想到..

Answer 1

文档中有一个示例，在“真实”数值之上使用 ko.pureCompulated 层:

this.price = ko.observable(25.99);

this.formattedPrice = ko.pureComputed({
    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
});

来源:http://knockoutjs.com/documentation/computed-writable.html

这允许您在数据绑定(bind)中使用formattedPrice，您甚至可以对其进行写入。 price 将保留为数字。不过，您需要在 View 模型中为每个数字添加一个额外的属性...

如果您只是需要单向绑定(bind)，您还可以创建一个扩展 text 绑定(bind)的 currencyFormatter 绑定(bind):

var formatCurrency = function(value) {
  value = parseFloat(("" + value).replace(/[^\.\d]/g, ""));
  return "$" + (isNaN(value) ? 0 : value);
}

ko.bindingHandlers.currencyText = {
  update: function(element, valueAccessor) {
    var originalValue = ko.unwrap(valueAccessor());
    var formatValue = formatCurrency.bind(null, originalValue);
    ko.bindingHandlers.text.update.call(null, element, formatValue);
  }
};


ko.applyBindings({
  source: ko.observable(1)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<input type="number" step="0.1" data-bind="value: source">
<h1 data-bind="currencyText: source"></h1>