KnockoutJS autoNumeric 绑定处理程序用 0 替换空值答案

【问题标题】：KnockoutJS autoNumeric binding handler replace empty value with 0KnockoutJS autoNumeric 绑定处理程序用 0 替换空值
【发布时间】：2014-12-11 01:23:33
【问题描述】：

好的，所以昨天一位用户帮助我获得了使用 autoNumeric 编写的 numeric binding handler 的一个非常好的实现，但我不知道如何让它用 0 替换空字符串。在小提琴中，删除20 然后标出，您可以看到从淘汰赛中得到的整数数量是 NaN。它显示为 0，但 ko 可观察对象显然没有在幕后更新。如何让它既显示 0 又存储 0 为空字符串？

html:

Integer Amount: <input type="text"  data-bind="autoNumeric:$data.Amount, settings:{mDec:0,aSep:','} " /><br />
Decimal Amount: <input type="text"  data-bind="autoNumeric:$data.OnloadAmount, settings:{mDec:3,aSep:'',vMin:0,vMax:1} " />
<p>Integer Amount:</p><p data-bind="text: Amount" />

javascript：

ko.bindingHandlers.autoNumeric = {
    init: function (el, valueAccessor, bindingsAccessor, viewModel) {
    var $el = $(el),
        bindings = bindingsAccessor(),
        settings = bindings.settings,
        value = valueAccessor();

    $el.autoNumeric(settings);
    $el.autoNumeric('set', parseFloat(ko.utils.unwrapObservable(value()), 10));
    $el.change(function () {
        value(parseFloat($el.autoNumeric('get'), 10));
    });
    },
    update: function (el, valueAccessor, bindingsAccessor, viewModel) {
    var $el = $(el),
        newValue = ko.utils.unwrapObservable(valueAccessor()),
        elementValue = $el.autoNumeric('get'),
        valueHasChanged = (newValue != elementValue);

    if ((newValue === 0) && (elementValue !== 0) && (elementValue !== "0")) {
        valueHasChanged = true;
    }

    if (valueHasChanged) {
        if (elementValue == '')
        $el.autoNumeric('set', 0);
        else
        $el.autoNumeric('set', newValue);
    }
    }
};

var vm = function(){   
    this.Amount=ko.observable(20); 
    this.OnloadAmount=ko.observable(0.5); //onLoad Testko.bindingHandlers.autoNumeric =  {
}

ko.applyBindings(new vm());

Fiddle

【问题讨论】：

标签： jquery knockout.js

【解决方案1】：

你只需要写这样的东西来让它工作

绑定处理程序更新中：

 if (valueHasChanged) {
      $el.autoNumeric('set', newValue);
      setTimeout(function() {
        $el.change()
      }, 0);
    }

工作小提琴here

如有任何问题，请告诉我们。

【讨论】：