私は現在、ボタンをクリックするだけでブラウザで新しいウィンドウを開く必要があるアプリケーションに取り組んでいます。ユーザーがメインウィンドウのテキストボックスに入力すると、それに応じて新しいウィンドウが更新されます。以前にノックアウトを使用しましたが、何らかの理由で2番目の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であり、新しいウィンドウを開く非常に基本的なボタン、ユーザーが入力するテキストボックス、および私が夢中でないことを示すスパンタグが含まれています。
//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の新しいウィンドウボタンをクリックしたときにポップアップする2番目のウィンドウのコードです。
//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>
ユーザーがメインページのテキストボックスに入力すると、そのページのスパンタグが自動的に更新されます。ユーザーが新しいウィンドウボタンをクリックすると、新しいウィンドウがポップアップし、ユーザーが入力したテキストが表示されます。ユーザーがメインウィンドウのテキストボックスに入力し続けると、セカンダリウィンドウのスパンタグは更新されません。ただし、ユーザーが[texbox値の表示]ボタンを押すと、テキストがアラートボックスに表示され、更新されます。だから私の質問は、ViewModelが明らかに更新されたときに2番目のウィンドウのスパンタグが更新されないのはなぜですか（[texbox値の表示]ボタンから表示された値のため）。
クイックコメント：何らかの理由でwindow.open（ "somepath"）;を介してファイルにアクセスします。この質問のコンテキストでは、実際には正しく機能しません。新しいウィンドウファイルを小さなHTTPサーバーにロードし、「somepath」を実際のURLにする必要があることがわかりました。（これが、この質問に添付されたサンプルコードがない理由です）。