Kendo UI datasource example

by David McClelland

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<div data-role="view" style="margin: 10 0 0 4" data-model="viewModel">
        Movie:
        <input type="text" data-bind="value: movie, events:{keyup:checkForEnterKey}" />
        <a data-bind="click: addMovie" data-role="button" id="btnAdd">Add</a>
        <div style="margin-top: 10px">
            Watched movies list:
            <ul data-template="movie-list-template" data-bind="source: movieList">
            </ul>
        </div>
    </div>
    <!--Kendo template -->
    <script id="movie-list-template" type="text/x-kendo-template">
    <li>        
        Movie: <span data-bind="style:{color:movieColor,
  fontSize:movieFontSize },				      
  text: movieName"></span> | 
        Added: <span data-bind="text: addedDate, 
				style:{color:addedDateColor}"></span>
        <a data-bind="click: removeMovie" 
 data-role="button"  id="btnRemove" >X</a>
    </li>
    </script>

CSS

#alert {
    display:none;
}

JavaScript

var app = new kendo.mobile.Application(document.body);
        var viewModel = {
            movie: '',
            movieList: [],
            checkForEnterKey:function(e){
                if(e.keyCode==13){
                    this.addMovie(e);
                    alert("enter key detected");
                }
            },
            addMovie: function (e) {

          //when addMovie function is called, add the movie
// property which is bound to the movie text box to //movieList array along with styles and added date

                if (this.movie != '') {
                    this.get("movieList").push(
 	{ movieName: this.get("movie"),
                        movieColor: "green",
                        movieFontSize: "16px",
                        addedDate: 
new Date().toLocaleDateString(),
                        addedDateColor: "navy"
                    });
                }

                //clear the value in the text box.
                this.set("movie", '');
            },

            removeMovie: function (e) {
                alert('Remove: ' + e.data.movieName);

                //Remove the movie name from the movieList array.
                this.set("movieList", 
jQuery.grep(this.movieList,
 function (item, i) {
                    return (item.movieName != e.data.movieName);
                }));
            }
        }