knockout.js 如何处理递增和递减ko.observables浮点

hgncfbus  于 2022-11-10  发布在  其他
关注(0)|答案(3)|浏览(152)

我在这里准备了一个小jsfiddle:jsfiddle.net/v8s176p2
基本上,我希望以0.1为步长递增和递减可观察值,但由于数字表示和精度问题,数字有时会显示为:1.32000000000000003...等,因此我希望它们只显示为带有1个小数点的值
我如何在knockout.js中编写完全相同的功能,但不使用浮点数。所以我的起始值是10,如果我将其解密,在HTML中它将显示为1(10-1 = 9)在html中显示为0.9?这可能是我的应用程序的更好方法,因为我从嵌入式设备上的服务器获取此数据,所以最好是接收数字200,然后除以10,但是在我的例子fiddle中,如何在ko.js中设置它呢?

efzxgjgh

efzxgjgh1#

使用整数并在文本绑定中进行除法运算以显示浮点数。这会将支持数据保持为整数,因此错误不会累积。

data-bind="text: num1() / 10"

http://jsfiddle.net/xagup8vt/

e7arh2l6

e7arh2l62#

您可以创建自定义绑定,如下所示

ko.bindingHandlers.numericText = {
    update: function (element, valueAccessor, allBindingsAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        var formattedValue = value.toFixed(2);
        ko.bindingHandlers.text.update(element, function () { return formattedValue; });
    }
};

在这里,您可以随意格式化值,然后像这样使用它:

<p data-bind="numericText: num1"></p>
z6psavjg

z6psavjg3#

另一种方法是将计算出的可观察值添加到可观察属性中,如

var vm = function(){
    var self = this;
    self.num1 = ko.observable();
    self.num1.formatted = ko.computed(function(){ return  Math.round((self.num1()*10),0)/10; });
}

通过这种方式,格式化包含在视图模型中,并且将vm对象转换为JSON将忽略输出中的格式化计算函数。
要使用它,<p data-bind="text: num1.formatted"></p>
另一种选择是使用可写的计算可观察性。我在下面的代码片段中包括了这两种技术。
第一个
http://jsfiddle.net/gonefishern/yo2nurf8/30/

相关问题