Kendo Binding Example

by redaemn

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<script id="template" type="text/x-kendo-template">
    <div>
        #if (get("accetto")) {# si #} else {# no #}#
    </div>
</script>

<div id="page">
    <div data-template="template" data-bind="source: privacy"></div>
    <button data-bind="click: click">click me</button>
    <pre data-bind="text: privacy.accetto"></pre>
    <div>
        <span data-bind="visible: isTruePrivacy()">si</span>
        <span data-bind="visible: isFalsePrivacy()">no</span>
    </div>
</div>

JavaScript

jQuery(function($) {
   
    var viewModel = kendo.observable({
        privacy: {
            accetto: true
        },
        click: function() {
            this.set('privacy.accetto', false);
        },
        isTrue: function(prop) {
            return this.get(prop) === true;
        },
        isFalse: function(prop) {
            return this.get(prop) === false;
        },
        isTruePrivacy: function() {
            return this.isTrue('privacy.accetto');
        },
        isFalsePrivacy: function() {
            return this.isFalse('privacy.accetto');
        }
    });
    
    kendo.bind($('#page'), viewModel);
});