从 observable 更新小数位的淘汰赛答案

【问题标题】：Knockout updating decimal places from observable从 observable 更新小数位的淘汰赛
【发布时间】：2014-08-27 05:27:33
【问题描述】：

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

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

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

然后我尝试添加一个绑定处理程序，这会导致“toFixed”上出现“未捕获的对象”

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 扩展 numeric，这也会导致“toFixed”上出现“未捕获对象”错误。

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>

【问题讨论】：

标签： javascript html knockout.js

【解决方案1】：

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

最终的函数如下所示：

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

我不知道为什么这行得通，但另一个不行？也许当我将值分配给 newValue 时，我只是为其分配了一个 observable，而 observable 不知道如何处理 toFixed()？没有解释所有其他问题，但至少这对我来说是固定的。

【讨论】：

因为toFixed 是Number 对象的函数，所以您在各种尝试中的所有错误都来自在String 类型对象上调用toFixed :-)

【解决方案2】：

我建议使用以下 JavaScript Number 构造函数，如果数字无效，它将返回 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);
 });

【讨论】：