来自敲除模板的输入字段不接受输入掩码

Question

我有一个增值税注册号字段。 我从 JQuery.InputMask 库中为其分配了一个掩码；

$("input.vatreg").inputmask("999-9999-99");

在 Knockout 中，我使用以下编辑模板；

<script id="editTmpl" type="text/html">
    <tr>
        <td><input data-bind="value: Name, hasFocus: addNew" /></td>
        <td><input data-bind="value: VatRegistrationNumber" class="vatreg" /></td>
        <td>
            <button data-bind="click: $root.acceptItemEdit" style="margin-right:10px;">Accept and Save</button>
            <button data-bind="click: $root.cancelItemEdit">Cancel</button>
        </td>
    </tr>
</script>

如您所见，这使用了 vatreg 类，我的期望是该字段会启用掩码，但事实并非如此。 我该如何解决这个问题？

Answer 1

认为您可能需要自定义绑定。我做了一个。运行下面的sn-p。顶部输入框是自定义绑定。下面的跨度是可观察的值。最后一个输入框是测试更新可观察对象并确保更新输入掩码。

ko.bindingHandlers.inputmask = {
  init: function(element, valueAccessor, allBindingsAccessor) {
    $(element).inputmask("999-9999-99", {
      "oncomplete": function() {
        valueAccessor()($(element).val());
      }
    });

    //handle disposal (if KO removes by the template binding)
    ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
      $(element).inputmask("destroy");
    });

  },
  //update the control when the view model changes
  update: function(element, valueAccessor, allBindingsAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());
    $(element).val(valueAccessor()());
  }
};



function model() {
  var self = this;
  this.VatRegistrationNumber = ko.observable('888-8888-88');

}

var mymodel = new model();

$(document).ready(function() {
  ko.applyBindings(mymodel);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>

<p>
input mask:
<input data-bind="inputmask: VatRegistrationNumber" class="vatreg" />
</p>
</br>
<p>
  input mask value: <span data-bind="text: VatRegistrationNumber"></span>
</p>

<br>
update the value <input data-bind="value: VatRegistrationNumber" class="vatreg" />