KnockoutJS (mapping) and using Netflix js Library (jQuery Mobile)

Sample using a javascript library with a jQuery mobile spin

by shelbyz

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0rc.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<script src="http://dl.dropbox.com/u/75275447/NetflixHaxx.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css">
<body>
    <div data-role="page" id="one">
        <div data-role="header">
            <a href="#one" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
            <h1>Search Netflix for Movies</h1>
        </div>
        <div data-role="content">
            <div data-role="fieldcontain">
                <label for="search">Search:</label>
                <input type="search" id="search" data-bind="value: search, valueUpdate: 'afterkeydown'" />
            </div>
            <a href="#two" data-role="button" data-bind='click: searchClick'>Search</a>
        </div>
        <div data-role="footer">
            <h4></h4>
        </div>
    </div>
    <div data-role="page" id="two">
        <div data-role="header">
            <h1>Results</h1>
            <a href="#one" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
        </div>
        <div data-role="content">
            <div data-role="collapsible" data-collapsed="false">
                <h3>Query</h3>
                <textarea data-bind='text: query'></textarea>
            </div>
            <br/>
            
            <div data-role="collapsible">
                <h3>Movies <label data-bind="text: movieCount"/></h3>
                <table>
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Release Year</th>
                            <th>Runtime</th>
                        </tr>
                    </thead>
         ...

CSS

table th { text-align:left; padding-right: 3em; font-style:italic }body { font-family: Helvetica, Arial }

JavaScript

//debugger;

var viewModel = function() {
    var _self = this;
    
    this.movieCount = ko.observable("(0)");
    this.search = ko.observable("");
    this.query = ko.observable("");
    this.movie = ko.observableArray();
    
    this.callback = function(result) {
        var movies = result["d"]["results"];

        if (movies === null || movies === 0) {
            alert("no movie results, try again");
        }
        else {
            _self.movieCount('(' + movies.length + ')');
            _self.movie(ko.mapping.fromJS(movies));
        }
    };
    
    this.searchClick = function() {
        NetflixHaxx.Search(_self.search(), _self.callback);
        
        _self.query(NetflixHaxx.QueryTerm());
    };
};

ko.applyBindings(new viewModel());