Using window.open() and passing a knockoutjs ViewModel for a view in the new window

Question

I am currently working on an application which requires a new window to be open in the browser on the click of button and then as a user types into a textbox on the main window the new window will update accordingly. I have used knockout before, but for some reason I am having problems getting the second windows view to update. Here is my current code.

//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("");
    };

This is the index.html and contains a very basic button which will open the new window, a textbox which the user will type into and a span tag to show I am not crazy.

//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>

This is the code for the second window which pops up when the user clicks on the new window button in the 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>

When the user types into the textbox on the main page, the span tag on that page updates automagically. When the user clicks on the new window button the new window pops up with the text the user just entered, when the user continues to type in the main windows textbox the span tag in the secondary window does NOT update. However when a user presses the "show texbox value" button the text is displayed in an alert box, and HAS BEEN UPDATED! So my question is why is my span tag in the second window not updating when the ViewModel clearly has been(because of the value displayed from the "show texbox value" button).

Quick Comment: For some reason accessing a file through window.open("somepath"); does not actually work properly in the context of this question. I found that I need to load the new window file in a small HTTP server and make "somepath" an actual url. (Which is why there is not some example code attached to this question).

Answer 1

The two windows must also share the same instance of ko if they share the same view model. That's because observables created with one instance of Knockout will not work with a different instance.

Here is an example that uses iframe, but the same principles apply to window.open:

Parent: http://jsfiddle.net/eZMTM/; Child: http://jsfiddle.net/GrXhv/7/

Parent code:

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

Child code:

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

Answer 2

As Michael has mentioned, you can just apply the binding to the body of the opened window, like this:

var mywindow = window.open('', '', 'height=400,width=600');
mywindow.document.write('<input id="testText" type="text" data-bind="textInput: text1"/>');
ko.applyBindings(viewmodel, mywindow.document);

If you would like to try a working example with a popup, here's a fiddle.

I Have attached the full code in a snippet below, however as the stackoverflow sandbox does not allow popups, it will fail in the snippet here. Still having the code in the post seems valuable enough.

PS: While old, this is one of the first hits on google I got, so i presumed adding a working example would help ...

$(function() {
  var viewModel = function() {
    var self = this;

    //creating our observables
    self.text1 = ko.observable("Hello World ...");
    self.text2 = ko.observable("... how's it going");

    //The magic happens here
    self.newKOWindow = function() {
      var mywindow = window.open('', '', 'height=400,width=600');

      //just adding the html boilerplate Part1
      mywindow.document.write('<html><head><title>The KO Popup</title>');
      mywindow.document.write('</head><body>');

      //manually creating the input the window      
      mywindow.document.write('<div class="dontCopyMe">');
      mywindow.document.write('<h2>A Manually created input which is bound</h2>');
      mywindow.document.write('<input id="testText" type="text" data-bind="textInput: text1"/>');

      //just adding the html boilerplate Part2      
      mywindow.document.write('</div>');
      mywindow.document.write('</body></html>');
      mywindow.document.close();

      //just copy our inputs into the new window
      $(".copyMe").clone().appendTo(mywindow.document.body);

      //copy our css
      $("#compiled-css").clone().appendTo(mywindow.document.head);

      //bind the viewmodel
      window.ko = ko;
      ko.applyBindings(self, mywindow.document.body);

      return true;
    }
  };

  model = new viewModel();
  ko.applyBindings(model);

});

.copyMe,
.dontCopyMe {
  border: 3px dashed limegreen;
  padding: 0.5rem;
  margin: 0.5rem;
  max-width: 30rem;
}

.dontCopyMe {
  border-color: grey;
}

h2 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<body>
  <div>
    <div class="copyMe">
      <h2>Our inputs (will be copied into the popup window)</h2>
      <input type="text" data-bind="textInput: text1" />
      <input type="text" data-bind="textInput: text2" />
    </div>
    <div class="copyMe">
      <h2>Same Inputs just to show this is working :)</h2>
      <input type="text" data-bind="textInput: text1" />
      <input type="text" data-bind="textInput: text2" />
    </div>
    <input id="NWO" type="button" value="NEW KO WIN OPEN" data-bind="click: newKOWindow" />
  </div>
</body>