Question

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

<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)，而某些基础数据始终为数字？相反的情况可能是基础数据是文本，但可以在需要时以某种方式以数字形式访问。

谢谢

Answer 1

要将viewmodel中的值与显示的值分开，可以使用computed observable。

例如，您可以使用这样的viewmodel：

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'，那么当文字退出该字段时，可以更改该文字。扩展器在这种情况下工作正常。

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

2 个答案: