javascript - Knockout js bindingHandlers 扩展未更新某些字符输入上的文本输入控件

Question

我正在尝试创建电话号码格式的 knockout 扩展。当我第一次输入 2139139090 至 213-913-9090 时，电话号码格式正确。紧接着，如果我从数字中删除连字符(-)，则它不会在文本控件中格式化。但是，如果我从 js 代码将格式化值记录到控制台，它会显示为格式化的。空格的行为相同，+1 就像特殊字符一样。如果我更改数字中的任何数字，所有格式都可以正常工作。

<input type="text" class="form-control" id="userform-phone" data-bind="textInputPhone:user.phone" /> 



ko.bindingHandlers.textInputPhone = {
            init: function (element, valueAccessor) {
                $(element).on('blur', function () {
                    var inputvalue = $(element).val().trim();
                    var observable = valueAccessor();
                    if (inputvalue) {
                        var regexstring = /^(?:\+?1)?\(?[- .]?(\d{3})\)?[- .]?(\d{3})[- .]?(\d{4})([-. ]?[a-zA-z].*)?$/gm
                        var phoneformat = '$1-$2-$3$4';
                        var formattedPhoneNumber = inputvalue.replace(regexstring, phoneformat);
                        observable(formattedPhoneNumber);
                    } else {
                        observable('');
                    }
                });
            },
            update: function (element, valueAccessor) {
                var valueUnwrapped = ko.utils.unwrapObservable(valueAccessor());
                $(element).val(valueUnwrapped);
            }
        }

Answer 1

当您设置ko.observable时，它检查新值是否与其已有值不同。如果值相同，它不会通知任何订阅者。

当您输入第一个数字时，您将可观察值设置为 "213-913-9090" 。任何时候<input>模糊了，你重新评估值(value)。现在这里有一个问题:

如果您仅更改空白，则编辑之前和之后的结果将完全相同。这意味着您的 update未触发，且 .val(valueUnwrapped)从未被调用过。

您可以进行的两个快速修复:

• 调用 observable.notifySubscribers在您将可观察值设置为相同的值之后，或者
• 延长user.phone使用.extend({ notify: 'always' })

或者，您可以使用自定义扩展器尝试不同的方法，如this example (Example 1) .

一个快速修复的示例:

ko.bindingHandlers.textInputPhone = {
  init: function(element, valueAccessor) {
    $(element).on('blur', function() {
      var inputvalue = $(element).val().trim();
      var observable = valueAccessor();
      var newValue = '';

      if (inputvalue) {
        var regexstring = /^(?:\+?1)?\(?[- .]?(\d{3})\)?[- .]?(\d{3})[- .]?(\d{4})([-. ]?[a-zA-z].*)?$/gm
        var phoneformat = '$1-$2-$3$4';
        var formattedPhoneNumber = inputvalue.replace(regexstring, phoneformat);
        newValue = formattedPhoneNumber;
      }

      // Option 1: notify explicitly
      if (observable.peek() === newValue) {
        observable.notifySubscribers(newValue);
      } else {
        observable(newValue);
      }
    });
  },
  update: function(element, valueAccessor) {
    var valueUnwrapped = ko.utils.unwrapObservable(valueAccessor());
    $(element).val(valueUnwrapped);
  }
}

ko.applyBindings({
  user: {
    phone: ko.observable("") //.extend({notify: 'always'}) // Option 2
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input data-bind="textInputPhone:user.phone" />