jQWidgets Forums

Tagged: jQuery, jQuery Masked Input, jqxmaskedinput, masked input

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 12 years, 10 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Data-binding using knockoutJS Posts

June 17, 2012 at 11:30 pm Data-binding using knockoutJS #5013

Member

Hi,
Where can I find a simple example of data-binding jqxMaskedInput using knockoutJS?
Thanks.

June 18, 2012 at 10:52 am Data-binding using knockoutJS #5032

Peter Stoev

Keymaster

Hi cm,

Here’s a sample code which integrates the jqxMaskedInput widget with KnockoutJS.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This demo demonstrates how to integrate the jqxMaskedInput's widget with Knockout.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../scripts/knockout-2.1.0.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmaskedinput.js"></script>
    <script type="text/javascript">
        (function ($, ko) {
            ko.jqwidgets = ko.jqwidgets || {};
            ko.jqwidgets.dataBinding = function (settings) {
                var me = this;
                var binding = {},
                name = settings.name;
                var updating = false;
                var updatingFromObservable = false;
                binding.init = function (element, valueAccessor, allBindingAccessor, viewModel) {
                    var unwrappedValue = ko.utils.unwrapObservable(valueAccessor());
                    var modelOptions = ko.toJS(unwrappedValue);
                    widget = $.data(element)[name].instance;
                    if (settings.events) {
                        $.each(settings.events, function () {
                            var eventName = this;
                            $(element).bind(eventName + '.' + element.id, function (event) {
                                if (!updatingFromObservable) {
                                    updating = true;
                                    var val = valueAccessor();
                                    var property = settings.getProperty(widget, event, eventName);
                                    if (val.value && $.isFunction(val.value)) {
                                        val.value(property.value);
                                    }
                                    else if (val.value) {
                                        valueAccessor(property.value);
                                    }
                                    updating = false;
                                }
                            });
                        });
                    }
                };
                binding.update = function (element, valueAccessor, allBindingAccessor, viewModel) {
                    var unwrappedValue = ko.utils.unwrapObservable(valueAccessor());
                    var modelOptions = ko.toJS(unwrappedValue);
                    widget = $.data(element)[name].instance;
                    if (updating)
                        return;
                    $.each(settings, function (name, value) {
                        if (modelOptions[name]) {
                            if (!updating) {
                                updatingFromObservable = true;
                                settings.setProperty(widget, name, widget[name], modelOptions[name]);
                                updatingFromObservable = false;
                            }
                        }
                    });
                };
                ko.bindingHandlers[settings.name] = binding;
            };
            ko.jqwidgets.dataBinding = new ko.jqwidgets.dataBinding({
                name: "jqxMaskedInput",
                value: null,
                events: ['valuechanged'],
                getProperty: function (object, event, eventName) {
                    if (eventName == 'valuechanged') {
                        return { name: "value", value: object.val() };
                    }
                },
                setProperty: function (object, key, value, newValue) {
                    if (key == 'value') {
                        object.val(newValue);
                    }
                }
            });
        } (jQuery, ko));
        $(document).ready(function () {
            var theme = getTheme();
            var viewModel = function () {
                this.phoneNumber = ko.observable('0018004234');
            };
            // Create jqxMaskedInput
            $("#phoneInput").jqxMaskedInput({ width: '250px', height: '25px', mask: '(###)###-####', theme: theme });
            var vm = new viewModel();
            ko.applyBindings(vm);
            $("#Button").jqxButton({ theme: theme });
            $("#Button").click(function () {
                alert("Value: " + vm.phoneNumber());
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div style='margin-top: 10px;'>
            Phone Number</div>
        <div data-bind="jqxMaskedInput: {value: phoneNumber}" style='margin-top: 3px;' id='phoneInput'>
        </div>
        <input type="button" value="Get Value" style="margin-top: 10px;" id="Button" />
    </div>
</body>
</html>

Hope this helps you.

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 18, 2012 at 12:37 pm Data-binding using knockoutJS #5040

Member

Thanks Peter. It works fine.

I’m a beginner in JavaScript world (worked for many years on “windows desktop development”).

I´m now trying to adapt this data-binding strategy (jQWidgets + KnockoutJS) to generic Data-Entry Forms (jqxMaskedInput, jqxInputNumber, jqxGrid, and others).

Can you give me some clues to adapt your code to a multi-control form? Do I need to repeat all this code? Which is the best code reuse strategy?

Many thanks in advance

June 19, 2012 at 4:41 am Data-binding using knockoutJS #5088

Peter Stoev

Keymaster

The part that you can reuse for binding multiple masked inputs is:

       (function ($, ko) {
            ko.jqwidgets = ko.jqwidgets || {};
            ko.jqwidgets.dataBinding = function (settings) {
                var me = this;
                var binding = {},
                name = settings.name;
                var updating = false;
                var updatingFromObservable = false;
                binding.init = function (element, valueAccessor, allBindingAccessor, viewModel) {
                    var unwrappedValue = ko.utils.unwrapObservable(valueAccessor());
                    var modelOptions = ko.toJS(unwrappedValue);
                    widget = $.data(element)[name].instance;
                    if (settings.events) {
                        $.each(settings.events, function () {
                            var eventName = this;
                            $(element).bind(eventName + '.' + element.id, function (event) {
                                if (!updatingFromObservable) {
                                    updating = true;
                                    var val = valueAccessor();
                                    var property = settings.getProperty(widget, event, eventName);
                                    if (val.value && $.isFunction(val.value)) {
                                        val.value(property.value);
                                    }
                                    else if (val.value) {
                                        valueAccessor(property.value);
                                    }
                                    updating = false;
                                }
                            });
                        });
                    }
                };
                binding.update = function (element, valueAccessor, allBindingAccessor, viewModel) {
                    var unwrappedValue = ko.utils.unwrapObservable(valueAccessor());
                    var modelOptions = ko.toJS(unwrappedValue);
                    widget = $.data(element)[name].instance;
                    if (updating)
                        return;
                    $.each(settings, function (name, value) {
                        if (modelOptions[name]) {
                            if (!updating) {
                                updatingFromObservable = true;
                                settings.setProperty(widget, name, widget[name], modelOptions[name]);
                                updatingFromObservable = false;
                            }
                        }
                    });
                };
                ko.bindingHandlers[settings.name] = binding;
            };
            ko.jqwidgets.dataBinding = new ko.jqwidgets.dataBinding({
                name: "jqxMaskedInput",
                value: null,
                events: ['valuechanged'],
                getProperty: function (object, event, eventName) {
                    if (eventName == 'valuechanged') {
                        return { name: "value", value: object.val() };
                    }
                },
                setProperty: function (object, key, value, newValue) {
                    if (key == 'value') {
                        object.val(newValue);
                    }
                }
            });
        } (jQuery, ko));

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.