KnockoutJS (mapping) and using Netflix js Library and Html5 postMessage

Sample using a javascript library/Html5 postMessage subscribing to iframe's onmessage

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/NetflixHaxxv2.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>
    
    <iframe id="frame" src="http://dl.dropbox.com/u/75275447/frame2.html" hidden="hidden"></frame>
</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;

addEvent = function(obj, type, name) {
    if(obj && obj.addEventListener) {
        obj.addEventListener(type, name, false);
    } else if(obj && obj.attachEvent) {
        obj.attachEvent('on' + type, name);
    }
};

var viewModel = function() {
    var _self = this;
    
    this.movieCount = ko.observable(0);
    this.search = ko.observable("");
    this.query = ko.observable("");
    this.movie = ko.observableArray();
    
    addEvent(document.getElementById("frame"), "message", function(e) {
        if(e.origin !== "http://fiddle.jshell.net") {
            alert("Message originated from: " + e.origin);
            return;
        }

        NetflixHaxx.Search(e.data, window.parent);
    });
    
    window.onmessage = function(e) {
        if(e.origin !== "http://dl.dropbox.com") {
            alert("Message originated from: " + e.origin);
            return;
        }
        _self.query(e.data.Query);
        _self.movieCount(e.data.Movies.length);
        _self.movie(ko.mapping.fromJS(e.data.Movies));
    };
    
    this.searchClick = function() {
        document.getElementById("frame").contentWindow.postMessage(_self.search(), "http://dl.dropbox.com");
    };
};

ko.applyBindings(new viewModel());