如何绑定数字并防止科学记数法？答案

【问题标题】：How do I bind a number and prevent scientific notation?如何绑定数字并防止科学记数法？
【发布时间】：2014-06-06 14:46:24
【问题描述】：

我想将一个数字绑定到一个输入框，并确保它永远不会以科学计数法显示。

<input type="text" class="form-control text-right" 
       data-bind="value: myData, valueUpdate: 'afterkeydown'" />

输入框应接受最多 8 位的十进制数，并且我应该能够从我的 viewModel 修改 myData 并将其显示为诸如 .00000001 之类的数字。我希望 myData 成为一个数字，因为我在 viewModel 中对其执行算术运算。

示例numeric extender 对我不起作用，因为如果您开始尝试输入.00001，它就会开始从用户下方更新值。我尝试过使用速率限制，但该设置很挑剔，因为它最终也会改变用户下方的值。

有没有办法编写一个扩展程序，使与输入框的显示绑定始终为toFixed(8)，而某些基础数据始终为数字？如果底层数据是文本但可以在需要时以数字形式访问，则相反是可以的。

谢谢

【问题讨论】：

标签： knockout.js

【解决方案1】：

要将视图模型中的值与显示的值分开，您可以使用computed observable。

例如，您可以拥有这样的视图模型：

function ViewModel() {
    var self = this;
    this.myValue = ko.observable(0);
    this.displayedValue = ko.computed({
        read: return self.myValue().toFixed(8),
        write: function (value) { 
            self.myValue(value); //maybe do something to ensure you save a number
        } 
    });
}

当您需要进行计算时，请使用myValue，但您的html 使用displayedValue：

<input type="text" class="form-control text-right" 
       data-bind="value: displayedValue, valueUpdate: 'afterkeydown'" />

【讨论】：

这是一个很好的解决方案。非常感谢！

【解决方案2】：

从用户下方更新值的原因是因为您使用的是valueUpdate: 'afterkeydown'。这对于任何会改变文本的东西来说都是一个问题，因为如果文本在输入时发生变化，它会使用户感到困惑。如果您不使用valueUpdate: 'afterkeydown'，则可以在它们跳出字段时更改文本。扩展器适用于这种情况。

【讨论】：