使用window.open（）並在新窗口中傳遞knockoutjs ViewModel作爲視圖

我目前正在開發一個應用程序，該應用程序需要在瀏覽器中單擊按鈕打開一個新窗口，然後作爲用戶類型到主窗口的文本框中，新窗口將相應地更新。我之前使用過基因敲除，但出於某種原因，我有問題需要更新第二個窗口視圖。這是我目前的代碼。使用window.open（）並在新窗口中傳遞knockoutjs ViewModel作爲視圖

//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值」按鈕時，文本顯示在警告框中，並且已被更新！所以我的問題是爲什麼當ViewModel顯然已經存在時（因爲「show texbox value」按鈕顯示的值），第二個窗口中的span標記不會更新。

快速評論：出於某種原因通過window.open（「somepath」）訪問文件;在這個問題的背景下實際上並不適用。我發現我需要在一個小的HTTP服務器中加載新的窗口文件，並使「somepath」成爲一個真實的URL。（這就是爲什麼沒有一些示例代碼附加到這個問題）。

來源

2013-03-25 Thomas Florin

我不認爲你可以在2個瀏覽器窗口一樣，之間的通信。 http://robertnyman.com/2010/03/18/postmessage-in-html5-to-send-messages-between-windows-and-iframes/事實上，他們在HTML5中提出了一些新的東西，表明它不是這很簡單。 – Rich 2013-03-25 21:23:13

確實如果我試圖從不同的域打開這個窗口會更困難。然而，因爲我不是，這是完全有效的，並且有效。這是淘汰賽，我有問題。在這裏我找到了一個有趣的問題。 http://stackoverflow.com/questions/1830347/quickest-way-to-pass-data-to-a-popup-window-i-created-using-window-open/1830388#1830388 – 2013-03-25 21:37:08

如果兩個窗口共享相同的視圖模型，則它們還必須共享相同的ko實例。這是因爲使用Knockout的一個實例創建的observables不適用於其他實例。

下面是一個使用iframe一個例子，但同樣的原理也適用於window.open：

父級：http://jsfiddle.net/eZMTM/;兒童：http://jsfiddle.net/GrXhv/7/

父代碼：

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

兒童代碼：

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

來源

2013-03-26 10:50:52

這工作非常感謝！ – 2013-03-26 13:06:39

一直試圖做到這一點 - 似乎它已經在淘汰賽3中打破，回滾到2.3.0，並且工作正常。 – 2014-07-25 12:14:19

上面的例子適用於Knockout 3.1.0。如果你可以重現你使用jsFiddle發現的問題，我會看看我能否提供幫助。 – 2014-07-28 01:36:02

使用window.open（）並在新窗口中傳遞knockoutjs ViewModel作爲視圖

回答

相關問題