входная маска не работает с knockoutjs

Question

В настоящее время я использую Knockoutjs для обработки привязок в модальном модуле загрузки. Все работает нормально, пока я не начну добавлять маску ввода в поля. Например, у меня есть:

<div class="modal fade" id="cardModal" tabindex="-3" role="dialog" aria-hidden="true" > 
<input class="form-control amountmask borderblack" data-val="true" value="11000.89" /> 
<!-- /.modal-dialog --> 

Это прекрасно работает, он использует AutoNumeric.js, это применяется с помощью JQuery:

<script type="text/javascript"> 
    $(document).ready(function() { 
     // masked edit for dollar amount 
     $('.amountmask').autoNumeric('init'); 
    }); 
</script> 

Если добавить Knockoutjs в смесь, имея модальный использование данных обязывать:

<div class="modal fade" id="cardModal" tabindex="-3" role="dialog" aria-hidden="true" data-bind="with: itemForEditing"> 
<input class="form-control amountmask borderblack" data-val="true" data-bind="value: Amount" /> 
<!-- /.modal-dialog --> 

Связывание работает нормально, но маска ввода перестает работать. Во всяком случае, вокруг? Если я удалю привязку данных, маска ввода снова будет работать, но я потеряю привязку.

Answer 1

Что вам нужно сделать, так это создать пользовательскую привязку, которая позаботится о применении плагина jQuery для ввода.

Knocout документ: Creating custom bindings очень ясно о том, как это сделать:

ko.bindingHandlers.yourBindingName = { 
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
    // This will be called when the binding is first applied to an element 
    // Set up any initial state, event handlers, etc. here 
    }, 
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
    // This will be called once when the binding is first applied to an element, 
    // and again whenever any observables/computeds that are accessed change 
    // Update the DOM element based on the supplied values here. 
    } 
}; 

Как вы можете прочитать в комментариях, вы должны реализовать метод, как это:

• INIT: применять плагин autoNumeric. Вы можете использовать allBindings здесь, чтобы получить доступ к дополнительным параметрам для вашего плагина, указанным в привязке ко, т. Е. Атрибут data-bind.
• update: это будет вызываться, если изменится свойство наблюдаемой модели, связанное с этим элементом. Вы можете решить, что с этим делать. Обычно этот метод используется для непосредственного обновления входного текста. В вашем случае я полагаю, что autoNumeric предлагает некоторую функциональность для обновления входного значения с использованием соответствующей маски. Вот что вы делаете здесь.

Обратите внимание, что связывание исходное значение делает две вещи:

• на инициализации, он присоединяется к событию изменения входного сигнала, так что, когда изменения входной величины, он обновляет связанную наблюдаемую величину
• обновление вызывается всякий раз, когда изменяется наблюдаемое свойство, и оно обновляет входное значение (текст) напрямую, используя новое значение.

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