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

Question

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

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

输入框应该接受最多8位的十进制数，我应该能够从我的viewModel中修改myData，并将其显示为.00000001等数字。我想myData是一个数字，因为我在viewModel中对它执行算术。

示例数字扩展器不适合我，因为如果您开始尝试键入.00001，它开始从用户下面更新值。我尝试过使用速率限制，但这种设置很挑剔，因为它最终也会改变用户下方的值。

是否有一种方法来编写扩展程序，使显示绑定到输入框始终是toFixed(8)，而一些底层数据始终是数字?如果底层数据是文本，但在需要时可以以数字形式访问，则相反。

谢谢

Answer 1

要将视图模型中的值与显示的值分开，可以使用计算可观察对象。

例如，你可以有一个这样的视图模型:

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，但使用displayedValue为您的html:

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

Answer 2

从用户下面更新值的原因是因为您正在使用valueUpdate: 'afterkeydown'。这将是一个问题，任何将改变文本，因为它会混淆用户，如果文本改变，因为他们键入。如果你不使用valueUpdate: 'afterkeydown'，那么文本可以改变，当他们tab出字段。