jQWidgets Forums

This topic contains 4 replies, has 2 voices, and was last updated by ahmetuzun 11 years, 8 months ago.

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

Author

KnockoutJS Posts

October 3, 2013 at 4:33 pm KnockoutJS #30175

ahmetuzun

Participant

Is it possible to apply knockoutjs binding by using the default widget creation method?

For example, if I create a jqxDateTimeInput widget with the following code, is it possible to apply bindings?

$(“#jqxDateTimeInput”).jqxDateTimeInput({width: 250, height: 25, theme: _theme, readonly: true });

October 3, 2013 at 4:51 pm KnockoutJS #30177

Peter Stoev

Keymaster

Hi ahmetuzun,

If you implement some custom knockout binding handlers, then yes, but we do not have such built-in code.

I’ve prepared the following sample for you:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">Integration of jqxDateTimeInput with Knockout</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../scripts/knockout-2.2.1.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="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.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).on(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 (widget[name] && 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: "jqxDateTimeInput",
                value: null,
                events: ['valuechanged'],
                getProperty: function (object, event, eventName) {
                    if (eventName == 'valuechanged') {
                        return { name: "value", value: event.args.date };
                    }
                },
                setProperty: function (object, key, value, newValue) {
                    if (key == 'value') {
                        object.setDate(newValue);
                    }
                }
            });
        } (jQuery, ko));
        $(document).ready(function () {
            var theme = getDemoTheme();
            $("#jqxdatetimeinput").jqxDateTimeInput({ width: '250px', height: '25px', theme: theme });
            $("#button").jqxButton({ width: 100, height: 25, theme: theme });
            var Model = function (date) {
                this.date = ko.observable(date);
            };
            var date = new Date();
            date.setFullYear(2012, 5, 5);
            var model = new Model(date);
            ko.applyBindings(model);
            $("#button").click(function () {
                alert("Date: " + model.date());
            });
        });
    </script>
</head>
<body class='default'>
    <div data-bind="jqxDateTimeInput: {value: date}" id="jqxdatetimeinput">
    </div>
    <div style="margin-top: 5px; clear: both;">
        <input id="button" type="button" value="Get Value" />
   </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

October 4, 2013 at 4:06 am KnockoutJS #30193

ahmetuzun

Participant

Thanks for the quick reply.

If I want to extend this method for other widgets, is it going to be enough to add code blocks like the following one for each widget?

           ko.jqwidgets.dataBinding = new ko.jqwidgets.dataBinding({
                name: "jqxDateTimeInput",
                value: null,
                events: ['valuechanged'],
                getProperty: function (object, event, eventName) {
                    if (eventName == 'valuechanged') {
                        return { name: "value", value: event.args.date };
                    }
                },
                setProperty: function (object, key, value, newValue) {
                    if (key == 'value') {
                        object.setDate(newValue);
                    }
                }
            });

October 4, 2013 at 9:10 am KnockoutJS #30209

Peter Stoev

Keymaster

Hi ahmetuzun,

I should point out that we already have KO integration and you may look at the samples online. The approach there is similar, but as it is already implemented I do not think that it is necessary for you to re-invent it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

October 4, 2013 at 11:23 am KnockoutJS #30223

ahmetuzun

Participant

I understand it now. Thank you very much.

Author

Posts

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

You must be logged in to reply to this topic.