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的一部分，所有绑定都引用在js文件中定义，只能由这个html访问...但我需要父窗口访问相同的ViewModel，就像我使用工具栏按钮的wysiwyg编辑器一样其他外部控件，所以我将viewModel的那一部分移动到定义其余部分的文件中......现在它不起作用了！

在我之前使用的外部文件中，我仍然使用parent.model访问父视图模型，但现在没有对该模型的直接独占访问，它似乎不起作用。虽然我可以使用console.log访问视图模型，但我也可以通过它来记录文档。它会将事件发送回viewModel，我的视图最初会更新，但在初始版本之后它不再更新。

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

Answer 1

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

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

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

淘汰赛：通过iframe访问View Model？

1 个答案: