Javascript 带knockoutjs的2状态可舍入数字文本框

我想有一个html数字文本框，有两种状态，当聚焦时，它必须显示所有小数位，当聚焦丢失时，只显示两个小数位。我几乎做到了

HTML:

<input data-bind="attr: { 'data-numericvalue': valueToRound}" class="numerictextbox"
       type="number"/>

var viewModel = {
    valueToRound: ko.observable(7.4267),
};

//NUMERIC TEXTBOX BEHAVIOUR
$('.numerictextbox').focusout(function () {
  $(this).attr("data-numericvalue", this.value); //this line does not update the viewModel
  this.value = parseFloat($(this).attr("data-numericvalue")).toFixed(2);
});
$('.numerictextbox').focusin(function () {
  if ($(this).attr("data-numericvalue") !== undefined) this.value = $(this).attr("data-numericvalue");
});

ko.applyBindings(viewModel); 

Jsfiddle：

---

但我的问题是，当focusout发生时，它不会更新绑定属性，在本例中是viewModel。这是我的代码的简化版本，因此我希望它对我实际场景中的许多属性都是通用的。

您混入了太多jQuery:）

Knockout有

事件

绑定和

hasFocus

绑定来处理UI输入

在下面的例子中，我制作了一个viewmodel，它有一个隐藏的

realValue

observable，用于存储未修改的输入。当

showdights

为false时，

displayValue

将该数字限制为2位数字

我使用了

hasFocus

来跟踪是否要显示整数：它链接到

showdights

var ViewModel=function（）{
this.showdights=ko.可观察（真）；
var真实值=可观察的ko（6.32324261）；
this.displayValue=ko.computed({
读：函数（）{
返回这个。showdights（）
？实值（）
：parseFloat（realValue（））.toFixed（2）；
},
写入：realValue
}，这个）；
};
应用绑定（新的ViewModel（））

这一切正常，但我认为它不适合我的需要，因为我的viewmodel中有很多属性，让我们称它们为valueToRound1、valueToRound2、valueToRound543……等等。那么我不能有，realvalueToRound1，showdigitsofValueToRound1，displaceValueToRound1，等等……有没有办法为每个绑定存储这个“子属性”呢？我添加了一个示例，展示了如何将计算层放入扩展器中。这使得创建其中一个数字输入值变得很容易，而不必为每种情况重写焦点和计算逻辑。