jQWidgets Forums
jQuery UI Widgets › Forums › Editors › MaskedInput › Data-binding using knockoutJS
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, 9 months ago.
-
Author
-
Hi,
Where can I find a simple example of data-binding jqxMaskedInput using knockoutJS?
Thanks.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 StoevjQWidgets Team
http://www.jqwidgets.comThanks 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
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 StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.