https://stackoverflow.com/questions/44139628/input-field-from-knockout-template-not-accepting-the-input-mask

by jlspake

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.js"></script>
<div>
  <table style="border: 1px solid blue;" data-bind="template: { name: 'editTmpl', foreach: rows }"></table>
</div>

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

CSS

vatreg {
  
}

JavaScript

var viewModel = function(){
	var self = this;
  
  self.acceptItemEdit = function(){
  	console.log("acceptItemEdit");
  };
  self.cancelItemEdit = function(){
  	console.log("cancelItemEdit");
  };
  
  self.rows = ko.observableArray([
  	{ Name: 'row1', addNew: ko.observable(false), VatRegistrationNumber: ko.observable('') },
    { Name: 'row2', addNew: ko.observable(false), VatRegistrationNumber: ko.observable('') }
  ]);
  
}

ko.applyBindings(new viewModel());

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