Bind data to iframe with Knockout.js

http://stackoverflow.com/questions/15523457/how-to-bind-data-to-iframe-using-knockout

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<h3>Outer document</h3>
Value: <input data-bind="value: someProperty" />

<h3>Frame</h3>
<!-- Iframe contents at http://jsfiddle.net/GrXhv/7/ -->
<iframe src="http://fiddle.jshell.net/GrXhv/7/show/" data-bind="bindIframe: someProperty"></iframe>

<p>Notice that changing the textbox in either frame will trigger an update in the other</p>

JavaScript

(function() {
ko.bindingHandlers.bindIframe = {
    init: function(element, valueAccessor) {
        function bindIframe() {
            try {
                var iframedoc =
                    $(element).contents().find('body')[0];
            } catch(e) {
                // ignored
            }
            if (iframedoc)
                ko.applyBindings(valueAccessor(), iframedoc);
        };
        bindIframe();
        console.log(element);
        ko.utils.registerEventHandler(element, 'load', bindIframe);
    }
};

    var viewModel = {
        someProperty: ko.observable(123)
    };
    
    // Bind outer doc
    ko.applyBindings(viewModel);
})()