我目前正在开发一个应用程序,该应用程序需要单击按钮在浏览器中打开一个新窗口,然后当用户在主窗口上的文本框中键入时,新窗口将相应更新。我以前使用过淘汰赛,但由于某种原因,我在更新第二个 Windows 视图时遇到了问题。这是我当前的代码。
//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 标签不会更新。但是,当用户按下“显示 texbox 值”按钮时,文本会显示在警告框中,并且已更新!所以我的问题是为什么我在第二个窗口中的 span 标签在 ViewModel 明显已经更新时没有更新(因为从“显示 texbox 值”按钮显示的值)。
快速评论:出于某种原因,通过 window.open("somepath"); 访问文件 在这个问题的上下文中实际上不能正常工作。我发现我需要在一个小型 HTTP 服务器中加载新的窗口文件,并使“somepath”成为一个实际的 url。(这就是为什么这个问题没有附加一些示例代码的原因)。