Kendo UI MVVM Sample: Example 03

Example of using the Kendo UI MVVM to bind a model to simple html elements. Demonstrates how changes to the ViewModel is reflected in the View.

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 src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css">
<div class="title">Instructions</div>
<ol>
    <li>Change the "First Name" or "Last Name" and see the "Full Name" change.</li>
    <li>Click the Reset button to see the Fist Name and Last Name get reset to it's original values.</li>
</ol>

<div id="personFields">
    <div class="field">
        <div>First Name:</div><input data-bind="value: firstName"/>
    </div>
    <div class="field">
        <div>Last Name:</div><input data-bind="value: lastName"/>
    </div>
    <div class="field">
        <div>Full Name:</div><span data-bind="text: fullName"/>
    </div>
    
    <button class="k-button" data-bind="click: reset">Reset</button>
</div>

CSS

.title {
    font-weight: bold;
    font-size: 18px;
}

#personFields {
    margin-top: 20px;
}

.field {
    display: block;
    width: 100%;
    padding-bottom: 5px;
}

.field div {
    display: inline-block;
    width: 100px;
}

JavaScript

// Create an observable view model object.
var person = kendo.observable({
    firstName: "John",
    lastName: "DeVight",
    customProductsCarousel : $('#redeemable-rewards'),


    // Create a calculated field.
    fullName: function() {
        // The "get" function must be used so that changes to any
        // dependencies will be reflected in the calculated field.
        return this.get("firstName") + " " + this.get("lastName");
    },
    
    reset: function() {
        this.set("firstName", "John");
        this.set("lastName", "DeVight");
    },
    createCarousel: function () {
                //Create the carousel
                if (customProductsCarousel.length === 0) {
                    return false;
                }
                customProductsCarousel.each(function () {
                    var self = this;

                    $(self).slick({
                        dots: false,
                        infinite: false,
                        speed: 300,
                        slidesToShow: 3,
                        slidesToScroll: 3,
                        //prevArrow: '<button type="button" data-role="none" class="slick-prev" style="display: block;"></button>',
                        //nextArrow: '<button type="button" data-role="none" class="slick-next" style="display: block;"></button>',
                        responsive: [
                            {
                                breakpoint: 660,
                                settings: {
                                    dots: false,
                                    infinite: false,
                                    slidesToShow: 1,
                                    slidesToScroll: 1
                                }
                            }
                        ]
                    });
                    $(self).get(0).slick.setPosition();
                    $(self).css('visibility', 'visible');

                });
                var that = this;
    ...