KnockoutJS (mapping) and using Netflix js Library

Sample using a javascript library with Fiddleception

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://jsfiddle.net/shelbyz/3Kqag/show_js/?NetflixHaxx.js"></script>
<body>
    <h2>Search Netflix for Movies</h2> 
    
    <input data-bind="value: search, valueUpdate: 'afterkeydown'" />
    <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-bind="foreach: movie">
            <tr>
                <td data-bind="text: Name" />
                <td data-bind="text: ReleaseYear" />
                <td data-bind="text: Runtime" />
            </tr>
        </tbody>
    </table>
</body>

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 = 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());