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

Question

我正在构建的应用程序需要使用 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，并且我的视图最初会更新，但在最初的视图之后，它不再更新。

有办法解决这个问题吗？

Answer 1

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

你不能让它以这种方式工作，因为 iframe 实际上是另一个页面中的单独页面。

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