jQuery UI Widgets Forums Editors MaskedInput Data-binding using knockoutJS

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Data-binding using knockoutJS #5013

    cm
    Member

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

    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

    Data-binding using knockoutJS #5040

    cm
    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

    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

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

You must be logged in to reply to this topic.