Как сохранить маску ввода jquery при обновлении DOM?

Question

Трудно описать. Вот фрагмент.

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

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



  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 есть маска ввода телефона. Когда мы вводим текстовое поле "Телефон", маска ввода действует.

Но после добавления первой записи в массив и очистки текстового поля маска ввода теряется.

Вопрос: как мы можем сохранить маску ввода в текстовом поле?

Answer 1

Самое простое, что нужно сделать, это поместить код установки маски в addNewNumberрутина.

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

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

Я сделал скрипку. Вероятно, было бы лучше сделать с пользовательской привязкой, но, как я уже сказал, это проще всего.

Теперь я сделал собственный обработчик привязки в другой скрипке. Это экономит на поиске элементов для маскировки, потому что он знает, на каком элементе он находится.

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

        $(element).inputmask({
            mask: '[phone]'
        });
    }
}