One-way custom binding

by redaemn

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.web.min.js"></script>
<button data-bind="click: changeContentVisible">Change model value</button>

<br /><br />

<div class="sliding" data-bind="slide: contentVisible">
    <div class="title">Sliding Title</div>
    <div class="content">
        This is the content
    </div>
</div>

CSS

.sliding {
    border: 1px solid grey;
    display: inline-block;
    width: 200px;
}

.sliding .title {
    border-bottom: 1px solid grey;
    padding: 5px;
    background-color: grey;
    color: blue;
}

.sliding .content {
    padding: 5px;
    display: none;
}

JavaScript

jQuery(function($) {
   
    kendo.data.binders.slide = kendo.data.Binder.extend({
        refresh: function() {
            var value = this.bindings["slide"].get(),
                content = $(this.element).find('.content');
            
            if (value) {
                content.slideDown();
            } else {
                content.slideUp();
            }
        }
    });
    
    var viewModel = kendo.observable({
        contentVisible: false,
        changeContentVisible: function () {
            this.set('contentVisible', !this.contentVisible);
        }
    });
    
    kendo.bind(document.body, viewModel);
    
});