KendoUI and Netflix ODATA

Kendo UI version

by shelbyz

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.common.min.css">
<body> 
    <h2>Search Netflix for Movies</h2> 
    
    <input data-bind="value: search" />
    <button data-bind="click: searchClick">Search</button>
    <br/><br/>
    <textarea data-bind='text: query' cols="75" rows="6"></textarea>
    <br/><br/>
    <b>Movies found <label data-bind="text: movieCount"/></b>
    <br/><br/>
    
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Release Year</th>
                <th>Runtime</th>
            </tr>
        </thead>
        <tbody data-template="row-template" data-bind="source: movie" />
    </table>
</body>
<script id="row-template" type="text/x-kendo-template">
    <tr>
        <td data-bind="text: Name" />
        <td data-bind="text: ReleaseYear" />
        <td data-bind="text: Runtime" />
    </tr>
</script>

CSS

table th { text-align:left; padding-right: 3em; font-style:italic }body { font-family: Helvetica, Arial }
input:not([type]), input[type=text], input[type=password], select { background-color: #FFFFCC; border: 1px solid gray; padding: 2px; }

JavaScript

//debugger;

var viewModel = kendo.observable({
    movieCount: "0",
    search: "",
    query: "",
    movie: [],
    
    addMovie: function(name, runtime, releaseYear) {
        viewModel.get("movie").push({Name: name, Runtime: runtime, ReleaseYear: releaseYear});
    },
    
    callback: function(result) {
        var movies = result["d"]["results"];

        if (movies === null || movies === 0) {
            alert("no movie results, try again");
        }
        else {
            viewModel.set("movieCount", movies.length);
            
            for (var i = 0; i < movies.length; i++) {
                
                viewModel.addMovie(movies[i].Name, movies[i].Runtime, movies[i].ReleaseYear);
            }
        }
    },
    
    searchClick: function() {
        this.set("query", "http://odata.netflix.com/v2/Catalog/Titles?$select=NetflixApiId,Name,Runtime,ReleaseYear&$filter=substringof('" + this.get("search") + "',Name)&$orderby=Name&$callback=?&$format=json");

        $.ajax({
            dataType: "jsonp",
            url: this.get("query"),
            success: this.callback,
            error: function(XHR, textStatus, errorThrown) {
                alert(textStatus + ":" + errorThrown);
            }
        });
    }
});

kendo.bind($("body"), viewModel);