knockout: accessing the View Model through an iframe?

The app I'm building requires the use of iframes for wysiwyg text editing, and these iframes need to be wired up to the viewModel, but I'm finding that this clashes with knockout... or at least knockout seems not to apply bindings when I try to access them through the parent object.

Here'开发者_Python百科s some code...

    <script type="text/javascript">
        $(function(){
            ko.applyBindings(parent.model.project, $('#root')[0]);
        });
    </script>

    <ul id="root" data-bind="template: {name: function(){return type()},
                                                                            foreach: populate() }"></ul>

    <script id="document" type="text/html">

        <li class="draft" draft="${draft()}" data-bind="css: {expanded: $data.expanded}">
            <span data-bind="click: function(){parent.model.project.expand($data, 'draft')}">
                ${ordinal(draft())} Draft
                <img src="icons/close-black.png"
                    data-bind="click: function(){parent.model.project.deleteDraft($data)},
                                         css:{ only: function() {parent.model.project.drafts > 1} }"/>
            </span>
            <div>
                <ul data-bind="css: {expanded: $data.expanded},
                        template: {
                            name: 'draft',
                            foreach: $data.draftItems,
                        }"
                >
                </ul>
            </div>
        </li>

    </script>

    <script id="draft" type="text/html">
        {{if $data.name}}
        <li class="${name}">${name}</li>
        {{/if}}
    </script>

OK, this isn't a wysiwyg text editor, but it still illustrates my point.

Now the thing is, when I wrote this it worked perfectly. I had the part of viewModel that all the bindings refer to defined in a js file accessed only by this html... but I need the same ViewModel to be accessed by the parent window, as I would with a wysiwyg editor for toolbar buttons and other external controls, so I moved that part of the viewModel to the file where the rest of it was defined... and now it doesn't work!

In the external file that I had previously I was still accessing the parent view model using parent.model, but now not having direct exclusive access to that model it doesn't seem to work. The thing is though that I can access the view model with console.log, I can document.write from it too, it fires off events back to the viewModel, and my view updates initially, but after that initial one it no longer updates.

Is there a way to solve this?

iframes won't inherit bindings from parent elements.

You can't make it work that way, as iframes really are separate pages within another page.

Each iframe will need to have its own view model. If that viewmodel needs to come from another view model, you'll need to share that data via global JS objects or message passing or some other mechanism.