Mobile View MVVM - Templates

by kendomobile

HTML

<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<link rel="stylesheet" href=" http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css">
 <!-- Demo created for the book: Building Mobile Applications Using Kendo UI Mobile andASP.NET Web API.
http://www.packtpub.com/building-mobile-applications-with-kendoui-html5/book -->
<div data-role="view" style="margin:10 0 0 4" data-model="viewModel">
        Movie:
        <input type="text" data-bind="value: movie" />
        <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>

JavaScript

var app = new kendo.mobile.Application(document.body);
var viewModel = {
    movie: '',
    movieList: [],
    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);
        }));
    }

}