MVVM Example (nested properties?)

by korchev

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<script src="http://demos.kendoui.com/content/shared/js/console.js"></script>
<div id="content">
   
   <select data-text-field="name" data-value-field="value" data-bind="source: dropDownList, value: dropDownValue" ></select>
    <button data-bind="click: addNew">CLick here to Test</button>
    <br/>
    <br/>
    <label>Selected Value= <span data-bind="text: dropDownValue"></span> :: <span data-bind="text:displayDropDownValue"></span></label>
</div>
<div class="console">
</div>

CSS

.console div
{
    background-image: url("sprite.png");
    background-repeat: no-repeat;
    background-color: transparent;
}
* html .console div
{
    background-image: url("sprite_ie6.png");
}
.console
{
    background-color: #FFF;
    border: 1px solid #CCC;
    color: #333;
    font: 11px Consolas, Monaco, "Bitstream Vera Sans Mono" , "Courier New" , Courier, monospace;
    height: 200px;
    margin: 1.4em 0 0;
    overflow-x: hidden;
    overflow-y: scroll;
    text-align: left;
}
.console .count
{
    background-color: #91AFEF;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    color: #FFFFFF;
    font-size: 10px;
    margin-left: 5px;
    padding: 2px 6px 2px 5px;
}
.console div
{
    background-position: 6px -95px;
    border-bottom: 1px solid #DDD;
    padding: 5px 5px 4px 24px;
}
.console .error
{
    background-position: 6px -135px;
}

JavaScript

var viewModel = kendo.observable({
    PMFilter :true,
    SAFilter :false,
    dropDownList: function() {
        var src = [
            {
            name: "Choose One",
            value: 0}
        ];

        if (this.get("SAFilter")) {
            src.push({
                name: "Suggested Activity",
                value: 1
            });
        }
        if (this.get("PMFilter")) {
            src.push({
                name: "Suggested Performance Measure",
                value: 2
            });
        }

        src.push({
            name: "User Activity",
            value: 3
        });
        src.push({
            name: "User Performance Measure",
            value: 4
        });
        return new kendo.data.ObservableArray(src); //return ObservableArray
    },
    dropDownValue: 0,
    displayDropDownValue: function() {
        var src = this.dropDownList(); //call the method
        var idx = this.get("dropDownValue");
        kendoConsole.log("IDX = " + idx);
        var text = src[idx].get("name");
        return text;
    },
    addNew: function() {
        kendoConsole.log("---");
        var txt = this.displayDropDownValue(); //call the method
        kendoConsole.log(txt);
    }
});

kendo.bind($('#content'), viewModel);