녹아웃 템플릿의 입력 필드가 입력 마스크를 허용하지 않습니다.

Question

VAT 등록 번호 필드가 있습니다. JQuery.InputMask 라이브러리에서 마스크를 지정합니다.

$ ("input.vatreg"). 입력 마스크 ("999-9999-99");

넉 아웃에서 다음 편집 템플릿을 사용합니다. 당신이 볼 수 있듯이

<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

사용자 정의 바인딩이 필요할 수 있습니다. 나는 그것을 만들었다. 아래 스 니펫을 실행하십시오. 맨 위 입력 상자는 사용자 정의 바인딩입니다. 아래 범위는 관찰 가능 값입니다. 마지막 입력 상자는 관찰 가능 항목을 테스트하고 입력 마스크가 업데이트되었는지 확인하는 것입니다.

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