淘汰赛：通过 iframe 访问视图模型？答案

【问题标题】：knockout: accessing the View Model through an iframe?淘汰赛：通过 iframe 访问视图模型？
【发布时间】：2011-08-30 09:01:09
【问题描述】：

我正在构建的应用程序需要使用 iframe 进行所见即所得的文本编辑，并且这些 iframe 需要连接到 viewModel，但我发现这与淘汰赛冲突......或者至少淘汰赛似乎没有当我尝试通过父对象访问它们时应用绑定。

这里有一些代码...

    <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>

好的，这不是所见即所得的文本编辑器，但它仍然说明了我的观点。

现在的问题是，当我写这篇文章时，它运行良好。我有 viewModel 的一部分，所有绑定都在仅由该 html 访问的 js 文件中定义...但我需要相同的 ViewModel 由父窗口访问，就像我使用工具栏按钮的所见即所得编辑器和其他外部控件，所以我将 viewModel 的那部分移动到定义其余部分的文件中......现在它不起作用！

在我之前的外部文件中，我仍然使用 parent.model 访问父视图模型，但现在无法直接独占访问该模型，它似乎不起作用。问题是尽管我可以使用 console.log 访问视图模型，我也可以从中进行 document.write，它会将事件触发回 viewModel，并且我的视图最初会更新，但在最初的那个之后它不再更新。

有没有办法解决这个问题？

【问题讨论】：

您使用的是哪个版本的淘汰赛？
我使用的是 1.2.1 版本，但现在我使用的是 1.3 测试版。对于这个问题，它仍然没有更好的效果！

标签： javascript iframe viewmodel knockout.js

【解决方案1】：

iframe 不会从父元素继承绑定。

你不能让它这样工作，因为 iframe 确实是另一个页面中的独立页面。

每个 iframe 都需要有自己的视图模型。如果该视图模型需要来自另一个视图模型，则您需要通过全局 JS 对象或消息传递或其他机制共享该数据。

【讨论】：