更新DOM时如何维护jquery inputmask？答案

【问题标题】：How to maintain the jquery inputmask when the DOM is updated?更新DOM时如何维护jquery inputmask？
【发布时间】：2015-06-02 20:10:00
【问题描述】：

很难描述。这是一个sn-p。

(function() {
  var PhoneNumber = function() {
    this.name = ko.observable();
    this.phone = ko.observable();
  };

  $('[data-mask="phone"]').inputmask({
    mask: '(999)999-9999'
  });



  var vm = {
    newNumber: ko.observable(new PhoneNumber()),
    numbers: ko.observableArray([]),
  };

  console.log('vm', vm.numbers());


  vm.numbersJson = ko.computed(function() {
    return ko.toJSON(vm.numbers);
  });
  vm.newNumberJson = ko.computed(function() {
    return ko.toJSON(vm.newNumber);
  });

  ko.applyBindings(vm);


  //events
  function addNewNumber() {
    vm.numbers.push(vm.newNumber());
    vm.newNumber(new PhoneNumber());
  }

  function removeNumber() {
    var item = ko.dataFor(this);
    var remVal = _.reject(vm.Numbers(), function(el) {
      return el.name === item.name;
    });
    vm.Numbers(remVal);
  };

  $(document).on('click', '#btnAdd', addNewNumber);
  $(document).on('click', '.btnRemove', removeNumber);
})();

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />

<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>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
<table class="table table-condensed table-hover table-striped table-bordered">
  <thead>
    <tr>
      <th>Name</th>
      <th>Phone</th>
      <th></th>
    </tr>
  </thead>
  <tbody data-bind="foreach:numbers">
    <tr>
      <td><span data-bind="text:name"></span>
      </td>
      <td><span data-bind="text:phone"></span>
      </td>
      <td class="form-group">
        <button class="btn btn-sm btnRemove btn-default" type="button"> <i class="fa fa-trash"></i>

        </button>
      </td>
    </tr>
  </tbody>
  <tfoot data-bind="with:newNumber">
    <tr>
      <td>
        <input type="text" class="input-sm form-control" data-bind="textInput:name" />
      </td>
      <td>
        <input type="text" class="input-sm form-control" data-mask="phone" data-bind="textInput:phone" />
      </td>
      <td>
        <button class="btn btn-sm btn-default" id="btnAdd" type="button"><i class="fa fa-plus"></i>
        </button>
      </td>
    </tr>
  </tfoot>
</table>
<h2>Values</h2>
<p>Numbers: <span data-bind="text:numbersJson"></span>
</p>
<p>New Number:
  <span data-bind="text:newNumberJson"></span>
</p>

请注意，当 DOM 准备好时，电话输入掩码就位。当我们在Phone文本框中输入时，输入掩码是有效的。

但是在将第一条记录添加到数组中并清除文本框后，输入掩码会丢失。

问题：我们如何才能在文本框上保留输入掩码？

【问题讨论】：

使用自定义绑定，您可以将数据绑定到电话输入。它将负责添加掩码。在使用 Knockout 时，使用执行“onLoad”操作的脚本几乎总是错误的方式。
我在 removeNumber 中得到“_ 未定义”。
@RoyJ OP 正在使用 underscoreJS。
哦，是的，它是 underscoreJS。我忘了参考，但它似乎知道它是什么。
@CrimsonChris，我认为您指出了正确的方向。您能否再澄清一点，或发布一些示例/文章的链接？

标签： javascript jquery knockout.js jquery-inputmask

【解决方案1】：

最简单的做法是将掩码设置代码放入addNewNumberroutine。

function setMask() {
    $('[data-mask="phone"]').inputmask({
        mask: '(999)999-9999'
    });
}

vm.addNewNumber = function () {
    vm.numbers.push(vm.newNumber());
    vm.newNumber(new PhoneNumber());
    setTimeout(setMask, 0);
};

我制作了a Fiddle。使用自定义绑定可能会更好，但正如我所说，这是最简单的。

现在我在another Fiddle 中创建了一个自定义绑定处理程序。它节省了搜索要屏蔽的元素，因为它知道它所在的元素。

ko.bindingHandlers.phoneTextInput = {
    init: function (element, valueAccessor, allBindings, data, context) {
        ko.bindingHandlers.textInput.init(element, valueAccessor, allBindings, data, context);

        $(element).inputmask({
            mask: '(999)999-9999'
        });
    }
}

【讨论】：