MVVM Example (nested properties?)

by siegesan

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 PMFilter = true;
var SAFilter = false; 

var i = 0;
    
var viewModel = kendo.observable({
    dropDownList: function() {
        var src =   [ 
                    {name:"Choose One", value:0}
                ];
    
        if (SAFilter) {
            src.push({name:"Suggested Activity", value: 1});
            kendoConsole.log("Adding Suggested Activity" + 1);
        }                               
        if (PMFilter) {
            src.push({name:"Suggested Performance Measure", value:2});
            kendoConsole.log("adding Suggested Measure - " + 2);
        }                               
    
        src.push({name:"User Activity", value:3});
        src.push({name:"User Performance Measure", value:4});        
        return src;               
    },
    dropDownValue: 0,
    displayDropDownValue: function() {       

        var src = this.get("dropDownList");
        var idx = this.get("dropDownValue");
        kendoConsole.log("IDX = " + idx);
        var text = src[idx].get("name");
        return text;
    },
    addNew: function() {
        kendoConsole.log("---");        
        var txt = this.get("displayDropDownValue");
        kendoConsole.log(txt);
    }
});

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