Binding Test

by grippstick

HTML

<link rel="stylesheet" href="http://babackofficedev.radolo.com/kendo/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://babackofficedev.radolo.com/Kendo/Styles/kendo.flat.min.css">
<script src="http://babackofficedev.radolo.com/Kendo/js/jquery.min.js"></script>
<script src="http://babackofficedev.radolo.com/Kendo/js/kendo.all.min.js"></script>
<div id='container'>
    <input data-role='phonemask' data-bind='value:widgVal,events:{change:change}' /> <span data-bind='text:widgVal'></span>

</div>

JavaScript

(function ($, undefined) {
    var kendo = window.kendo,
        ui = kendo.ui,
        Widget = ui.Widget,
        ns = ".radoloPhoneMask",
        NULL = null,
        CHANGE = "change",
        KEYPRESS = "keypress",
        proxy = $.proxy;

    var PhoneMask = Widget.extend({
        //I know I need to register events, but what events and why is not documented anywhere
        //maybe kendo can get us some documentation on how this is working
        events: [CHANGE],
        options: {
            name: "PhoneMask"
        },
        init: function (element, options) {
            var that = this;
            that._initializing = true;

            Widget.fn.init.call(that, element, options);

            element = that.element;
            options = that.options;

            element.on(CHANGE + ns, proxy(that._change, that))
                .on(KEYPRESS + ns, proxy(that._keypress, that));

            that.value(element.val());

            //notify that... i have no idea what this does...thanks for the documentation kendo :(
            kendo.notify(that);
            that._initializing = false;
        },
        value: function (value) {
            console.warn("value");
            var that = this;

            if (value === undefined) {
                //we need to return our current value                
                return that.element.val();
            }

            //if we made it to here then we are trying to set a value
            //check to see if it has changed
            if (that.element.val() !== value) {
                //it has so lets update the element 
                that.element.val(value);
            }
        },
        _change: function (e) {
            //the change event has fired so let the world know
            var that = this;
            that.trigger(CHANGE, e);
        },
        _keypress: function (e) {
            //the keypress happened so lets modify what we need to
            var that = this;
           ...