Question

我有一个可观察的项目，我正在尝试在该observable上应用用户驱动的格式。我有一个整数输入框，用户可以在其中选择多少个小数位，0-6。我正在尝试更新observable以根据该输入框中的选择应用小数位。

我首先尝试了一个计算值，但是没有用。返回'toFixed'不是函数的错误。

this.formattedResult = ko.computed(function () {
    var newValue = self.decimalValue();
    var precision = self.decimalPlaces();
    return newValue.toFixed(precision);
});

然后我尝试添加一个绑定处理程序，导致'toFixed'上的'uncaught object'

ko.bindingHandlers.numericText = {
update: function (element, valueAccessor, allBindingsAccessor) {
    var value = new String(ko.utils.unwrapObservable(valueAccessor()).toString());
    var precision = ko.utils.unwrapObservable(allBindingsAccessor().precision);
    var formattedValue = value.toFixed(precision);

    ko.bindingHandlers.text.update(element, function () { return formattedValue; });
},
defaultPrecision: 1
};

然后我尝试使用numericText扩展数字，这也导致'toFixed'上的'uncaught object'错误。

ko.extenders.numeric = function (target, precision) {
if (precision() != null) {
    var precisionValue = target();
    console.log(precisionValue);
    var precisionDecimal = precisionValue.toFixed(2);
    console.log(precisionDecimal);
    var result = ko.dependentObservable({
        read: function () {
            return target().toFixed(precision());
        },
        write: target
    });

    result.raw = target;
    return result;
}
else
    return target;
};

HTML元素的绑定都已更新，以便将这些更改考虑在内，但它们不起作用。我还尝试过简单地将'toFixed'添加到HTML中的数据绑定中，但也无效。

我发现了这些类似的问题，但解决方案对我不起作用。

Format knockout observable with commas and/or decimal places within html data binding, NOT in viewmodel

Formatting rules for numbers in KnockoutJS

Adding decimal formatting to Knockout number data bindings

这是一个非常令人沮丧的问题，因为我认为在计算函数中添加小数位非常简单。我做错了什么？

我不确定这是否重要，但我正在使用淘汰3.1

编辑：

我还尝试过简单地将'toFixed'添加到数据绑定中，但这也会导致未捕获的对象。

<p data-bind="text: decimalValue().toFixed(2)"></p>

Answer 1

我最终没有以我预期的方式解决我的问题，但我修改了计算列以强制小数为浮点数，然后将小数添加到该浮点值。

最终功能如下：

this.formattedResult = ko.computed(function () {
    var newValue = parseFloat(self.decimalValue());
    var precision = self.decimalPlaces();
    return newValue.toFixed(precision);
});

我不知道为什么会这样，但另一个却没有？也许当我将值赋给newValue时，我只是为它分配一个observable，而observable不知道如何处理toFixed（）？没有解释所有其他问题，但至少这对我来说是固定的。

Answer 2

我建议使用以下JavaScript编号构造函数，如果编号无效，将返回NaN。

this.formattedResult = ko.computed(function () {
// call the number constructor. newValue is now a number or NaN 
//we choose a default value as well.
     var newValue = isNaN(self.decimalValue()) ? 0 :  
Number(self.decimalValue()); 
// call the number constructor again
     var precision = isNaN(self.decimalPlaces()) ? 0 :  Number(self.decimalPlaces()); 
     return newValue.toFixed(precision);
 });

Knockout从observable更新小数位

2 个答案: