javascript - 使用 window.open() 并为新窗口中的 View 传递 knockoutjs ViewModel

Question

我目前正在开发一个应用程序，该应用程序需要单击按钮在浏览器中打开一个新窗口，然后当用户在主窗口的文本框中键入内容时，新窗口将相应更新。我以前使用过 knockout，但由于某种原因，我在更新第二个窗口 View 时遇到了问题。这是我当前的代码。

//main.js
   $(function () {
        var viewModel = new ViewModel();
        ko.applyBindings(viewModel);
        var newwindow;
        $("#new-window-btn").click(function () {
            newwindow = window.open("a/path/to/newwindow.html", "New Window","status=1,width=350,height=350");
            newwindow._ViewModel = viewModel;
        });

    });

    function ViewModel() {
        var self = this;
        self.textbox = ko.observable("");
    };

这是 index.html 并包含一个非常基本的按钮，它将打开新窗口，一个用户将输入的文本框和一个 span 标签，以表明我没有疯。

//index.html
<div id="new-window-btn" class="btn">new window</div>
<textarea cols="3" rows ="3" data-bind="value:textbox,valueUpdate:'afterkeydown'"></textarea>
<span data-bind="text: textbox"></span>

这是当用户点击 index.html 中的新窗口按钮时弹出的第二个窗口的代码

//newwindow.html
    <script type="text/javascript">
        $(function () {
            var viewModel = window._ViewModel;
            ko.applyBindings(viewModel);
            $("#alert-viewModel").click(function () {
                alert(viewModel.textbox());
            });
        });
    </script>
<span data-bind="text:textbox()"></span>
<div id="alert-viewModel" class="btn">show texbox value</div>

当用户在主页上的文本框中键入内容时，该页面上的 span 标记会自动更新。当用户单击新窗口按钮时，新窗口会弹出用户刚刚输入的文本，当用户继续在主窗口文本框中键入时，辅助窗口中的 span 标签不会更新。但是，当用户按下“显示文本框值”按钮时，文本会显示在警告框中，并且已更新!所以我的问题是，为什么我在第二个窗口中的 span 标签没有更新，而 ViewModel 显然已经更新(因为“显示文本框值”按钮显示的值)。

快速评论: 出于某种原因，通过 window.open("somepath"); 访问文件在这个问题的上下文中实际上并不能正常工作。我发现我需要在一个小型 HTTP 服务器中加载新的窗口文件，并使“somepath”成为一个实际的 url。 (这就是为什么这个问题没有附加一些示例代码的原因)。

Answer 1

如果两个窗口共享相同的 View 模型，则它们也必须共享相同的 ko 实例。这是因为使用 Knockout 的一个实例创建的可观察对象将不适用于不同的实例。

这是一个使用 iframe 的示例，但同样的原则适用于 window.open:

家长:http://jsfiddle.net/eZMTM/ ; child :http://jsfiddle.net/GrXhv/7/

父代码:

childWindow = ...;
childWindow.initChild(ko, viewModel);

子代码:

window.initChild = function(ko, viewModel) {
    window.ko = ko;
    ko.applyBindings(viewModel, document.body);
}