Ryan Overview Fiddle

by stevescotthome

HTML

<script src="http://dl.dropbox.com/u/3234184/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.metro.min.css">
<div>
   <!-- Stuff in here isnt affected -->        
</div>

<div id="overview-form">
   <!-- We're only binding to this div -->        
    <h1 data-bind='text: Clerkship' ></h1>
    
    <!-- Since the root object has a "Rotations" collection, we can send the rendering to a template to loop -->
    <ul id='rotations' data-template="rotation-template" data-bind="source: Rotations"></ul>
</div>

<!-- Since the type isn't text/javacript, this <script> tag doesn't cause blocking -->  
<script id="rotation-template" type="text/x-kendo-template">
    <li>
        <span class='name' data-bind="text: Name" /><span class='status' data-bind="text: getStatus" /><input data-bind="click: changeStatus" type="button" value="Change" />
    </li>
</script>

CSS

h1{
 font-size: 30px;
    font-weight:bold;
 margin-bottom: 30px;    
}

#rotations span{
     padding-right: 20px;
}

JavaScript

var viewModel = null;

$(document).ready(function(){
    //So this would probably get called after an $.ajax success call
    createModel(getJSONData());
});

function createModel(jsonData){
    //Add in custom functions here
    viewModel = kendo.observable({
        getStatus: function(rotation){
            //Since we're calling this from the rotation template a reference
            //to the rotaiton object is what gets sent... :)
            var status = rotation.get("Status");
            if(status == 0){
                return "Not Started";   
            }else if(status == 1){
                return "In Progress";   
            }else{
                return "Complete";   
            }
        },
        changeStatus: function(rotation){
            var status = rotation.data.get("Status");

           if(status == 0){
                rotation.data.set("Status", 1);
            }else if(status == 1){
                rotation.data.set("Status", 2);
            }else{
                rotation.data.set("Status", 0);
            }
        }
    });
    
    //This is how you put the "jsonData" onto the model to be "observable"
    for (var field in jsonData) {
        viewModel.set(field, jsonData[field]);
    }

    //Now tell kendo to apply your data to this div in the markup
    kendo.bind($("#overview-form"), viewModel);
}


function getJSONData(){
    return {
        Clerkship: "Emergency Medicine",
        Rotations: [
            { Name: "Emergency Medicine", Status: 0 },
            { Name: "Peds", Status: 1 },
            { Name: "Family Medicine", Status: 2 },
        ]
    }        
}