MVVM Plugin

by grippstick

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.metro.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<div id='containerWorking'> <span data-bind='text:checked'></span>
    <input type='checkbox' data-bind='checked:checked,events:{change:change}' />
</div>

<div id='containerBroken'> <span data-bind='text:checked'></span>
    <input data-role='uniform' type='checkbox' data-bind='checked:checked,events:{change:change}' />
</div>

JavaScript

//executes a jquery.uniform on the element if the data-role='uniform'
(function () {
    var kendo = window.kendo,
        ui = kendo.ui,
        Widget = ui.Widget,
        support = kendo.support,
        ns = ".radoloUniform";

    var Uniform = Widget.extend({        
        init: function (element, options) {
            var that = this;

            that._initializing = true;

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

            element = $(element);
            options = that.options;

            //change the width
            element.css('width','300px')
            
            //change our checkbox into a uniform plug-in
            //element.uniform();

            //notify that... i have no idea what this does...thanks for the documentation kendo :(
            kendo.notify(that);
            that._initializing = false;
        },
        options: {
            name: "Uniform"
        }
    });

    ui.plugin(Uniform);

})(jQuery);

var vm = new kendo.observable({
    checked: true,
    change: function (e) {
        alert('checkbox changed!!!');
    }
});

kendo.bind($('#containerWorking'), vm);

var vm2 = new kendo.observable({
    checked: true,
    change: function (e) {
        alert('checkbox changed!!!');
    }
});

kendo.bind($('#containerBroken'), vm2);