ノックアウトテンプレートからの入力フィールドは入力マスクを受け付けません

Question

私はVAT登録番号のフィールドを持っています。 私はそれにJQuery.InputMaskライブラリからマスクを割り当てます。

$（ "input.vatreg"）。inputmask（ "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

カスタムバインディングが必要な場合があります。私は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" />