Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to use KnockoutJS with a masked input?

I´m using that plugin : https://github.com/plentz/jquery-maskmoney to format my money editor...

I tried to use KnockoutJS in that editor, but it does not work... Without that mask all works fine...

My code test is simple :

<input id="Price" data-bind="value: Price"  type="text"  name="Price"> 

Javascript to Mask input

$("#Price").maskMoney({ symbol: 'R$ ', showSymbol: true, thousands: '.', decimal: ',', symbolStay: false });

And KnockoutJS

var ViewModel = function () {
            this.Price = ko.observable();

            this.PriceFinal= ko.computed(function () {
                return this.Price() 
            }, this);
        };

        ko.applyBindings(new ViewModel()); 
like image 520
Paul Avatar asked Feb 06 '12 12:02

Paul


People also ask

What is KnockoutJS used for?

KnockoutJS is basically a library written in JavaScript, based on MVVM pattern that helps developers build rich and responsive websites.

How do you activate a KnockoutJS model?

To activate Knockout, add the following line to a <script> block: ko. applyBindings(myViewModel); You can either put the script block at the bottom of your HTML document, or you can put it at the top and wrap the contents in a DOM-ready handler such as jQuery's $ function.

Is knockout JS Mvvm?

Yes, knockout. js does apply the MVVM pattern. It's explained in the documentation: A model: your application's stored data.


1 Answers

You can also register a binding handler for MaskMoney with Knockout, something like:

$(document).ready(function () {

ko.bindingHandlers.currencyMask = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var options = allBindingsAccessor().currencyMaskOptions || {};
        $(element).maskMoney(options);

        ko.utils.registerEventHandler(element, 'focusout', function () {
            var observable = valueAccessor();

            var numericVal = parseFloat($(element).val().replace(/[^\.\d]/g, ''));
            numericVal = isNaN(numericVal) ? 0 : numericVal;

            observable(numericVal);
        });

        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).unmaskMoney();
        });
    },

    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());

        $(element).val(value);
        $(element).trigger('focus');
    }
};

});

and then as your binding:

<input type="text" data-bind="currencyMask: MyModel.TotalCost, currencyMaskOptions: { symbol: '$', showSymbol: true, thousands: ',', precision: 0 }" />

Note that I tweaked the MaskMoney plugin slightly to use input.on('focusout.maskMoney', blurEvent); rather than input.bind('blur.maskMoney',blurEvent); because it was not triggering an update on losing focus via mouse clicking, only on tabbing.

I'm new to Knockout and have been finding the binding handler approach really nice for plugins like this and datepickers, etc.

like image 158
Tom W Hall Avatar answered Sep 28 '22 03:09

Tom W Hall