Question

我有一个增值税登记号码字段。我从JQuery.InputMask库中为它指定了一个掩码;

$（ “input.vatreg”）输入掩码（ “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

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

＆＃13;

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);

});

＆＃13;

<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" />

＆＃13;

来自Knockout Template的输入字段不接受输入掩码

1 个答案: