Маскирование числовых значений с использованием autoNumeric и Knockout

В общем передо мной встала задача — переписать один из контролов, построенный на репиттере и сделать его легче, отзывчивее для клиента. При этом решил использовать knockout. Внутри для отображения цифровых данных использовались DevExpress'овские текстовые поля, они очень удобны и служили исправно, но тут встал вопрос, а как же при замене на обычные текстовые поля, я смогу добавить маску.

Начало

Для того чтобы решить данную задачу, я стал искать, какие же есть нормальные плагины jquery или библиотеки, которые позволят просто и быстро решить задачу. В итоге я нашел две библиотеки:

• Плагин jquery jquery.maskedinput Страница плагина jquery.maskedinput
• Библиотека autoNumeric Страница библиотеки autoNumeric

Анализ

Посмотрев на возможности библиотек, я точно смог сказать, что буду использовать autoNumeric, так как у него есть возможность не показывать маску ввода, а обрабатывать вводимое значение на лету. Его поведение схоже с поведением текстового поля DevExpress. У плагина jquery.maskedinput, к сожалению, такой возможности не обнаружил. Есть только возможность ввода данных по строгой маске, которая при этом появляется в текстовом поле, информируя пользователя о предстоящем формате ввода. Для моего случая такая обработка не подходит.

Применение

Ну что ж, с выбором библиотеки маскирования данных в текстовом поле, я определился, но вот как же я буду подвязывать маску для полей. Сначала была мысль, установить для всех необходимых полей, использующих единый формат ввода, определенный класс, а затем при помощи jquery скормить библиотеке autoNumeric. Но мне показалось, что это решение, будет не очень удобным.
Тогда я подумал, а почему бы не воспользоваться мощью knockout! Так как knockout, позволяет реализовывать кастомные обработчики для связывания данных, то я решил создать именно такой обработчик и указывать его в атрибуте data-bind="".

Немного об autoNumeric

Привожу значение некоторых полезных методов, используемых мной при решении задачи:

• Метод autoNumeric() — позволяет активировать авто-маскирование на указанном элементе, посредством selector, к примеру вот так: $('.autonum').autoNumeric();
• Метод autoNumericGet(); — позволяет получить значение, которое может использоваться в арифметических операциях (т.е. значение освобожденное от разделителей, декорирующих вводимые данные). К примеру: $(selector).autoNumericGet();
• Метод autoNumericSet(value); — обрабатывает значение value, декорируя его необходимыми разделителями, для красоты вывода чисел. К примеру $(selector).autoNumericSet(value);

Привожу значение опций, передаваемых в метод autoNumeric() в качестве параметра:

• aSep — указывает, какой разделитель будет использоваться для сотен
• aDec — указывает, какой разделитель будет использоваться для дробной части
• mDec — указывает, сколько цифр будет указываться после разделителя дробной части

Пример передачи, используемых мной опций, для конфигурирования autoNumeric:

$('.autonum').autoNumeric({ aSep: ',', aDec: '.', mDec: 0 });

* Это означает что autoNumeric будет использовать ',' для разделителя сотен целой части и '.' в качестве разделителя дробной части. А так же кол-во цифр после дробного разделителя будет ровняться 0 (т.е. будут отображаться целые числа).

Реализация с использованием knockout

Реализация кастомного обработчика связывания данных для autoNumeric

 ko.bindingHandlers.numberMaskedValue = {
        init: function(element, valueAccessor, allBindingsAccessor) {
            //попытка получения опций, если они не указаны, 
            //то устанавливаются опции по умолчанию
            var options = allBindingsAccessor().autoNumericOptions || {
                aSep: ',',
                aDec: '.',
                mDec: 0
            };
            
            //привязка html элемента и применение опций для маскирования
            $(element).autoNumeric(options);
            
            //подпись на событие 'focusout' элемента, 
            //при котором будет производиться обновление observable свойства 
            ko.utils.registerEventHandler(element, 'focusout', function() {
                var observable = valueAccessor();
                //Вызов метода получения значения пригодного для арифметических операций
                value = $(element).autoNumericGet();
                observable(isNaN(value) ? 0 : value);
            });
        },
        update: function(element, valueAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor());
            //установка значения для отображения, в декорированном виде, пользователю
            $(element).autoNumericSet(value);
        }
    };

Выше приведенная реализация позволяет вот таким образом задействовать данный обработчик:

<input type="text" data-bind="numberMaskedValue: countOfFriends"/>

или с указанием опций:

<input type="text" data-bind="numberMaskedValue: countOfFriends, autoNumericOptions:{aSep: ',', aDec: '.', mDec: 3}"/>

В данном примере обработчика, обновление значения будет происходит при событии 'focusout'. Для пользователя, введенное значение будет выглядеть красиво, а в реальном observable свойстве, оно будет оставаться пригодным для арифметической обработки. Таким образом, я могу сразу решить две проблемы: привязка нужного (передача) контрола autoNumeric, и передача (обновление) значения в observable свойстве.

Ссылки

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

Спасибо за внимание!