如何用Knockout.js自定义绑定处理文本框？解决清空后自动恢复问题

嘿，我瞅了下你的代码，问题出在moneyInfinity绑定的update方法里的判断逻辑上。当你清空输入框切换焦点时，明明在change事件里把值设成了null，但update方法一执行，又把输入框给填回0.00了，对吧？

问题出在哪？ #

你看update里这段判断：

if (value() === '') {
  return;
}

你在change事件里设置的是value(null)，不是空字符串，所以这个判断根本触发不了！后面的格式化代码就会把null/multiplier当成0来处理，转成0.00再塞回输入框，这就是为啥清空后又恢复了。

怎么改？ #

咱们调整一下update方法的判断逻辑，同时确保空值时输入框保持为空：

修改后的完整update方法 #

update(element, valueAccessor, allBindingsAccessor) {
  const value = valueAccessor();
  const bindings = allBindingsAccessor();
  const multiplier = bindings.moneyMultiplier || 1.00;
  const abs = bindings.moneyABS || false;
  const format = ko.bindingHandlers.money.format;

  // 先拿到当前绑定的实际值
  const currentValue = ko.unwrap(value);
  
  // 如果值是null、undefined或者空字符串，直接把输入框设为空，别执行格式化
  if (currentValue === null || typeof currentValue === 'undefined' || currentValue === '') {
    $(element).val('');
    return;
  }

  // 正常情况再执行格式化赋值
  $(element).val(format(abs ? Math.abs(currentValue / multiplier) : currentValue / multiplier));
}

可选小优化 #

另外，在change事件里，你写的$this.val(null)其实没必要，直接设为空字符串更直观，和后面的逻辑保持一致：

$(element).change(function () {
  const $this = $(this);
  if ($this.val() === '') {
    $this.val(''); // 改成空字符串
    value(null); // 这里也可以改成value('')，看你业务需求，只要和update的判断匹配就行
    return;
  }
  // ... 剩下的逻辑不变
});

改完效果咋样？ #

现在你再清空输入框切换焦点：

1. change事件触发，把绑定值设为null（或者空字符串）
2. update方法检测到值是空的，直接把输入框设为空就返回了，不会走格式化逻辑
3. 输入框就安安稳稳保持为空，再也不会自动变回0.00啦！

内容的提问来源于stack exchange，提问作者tesicg