search

99x / boilerplatejs

Your own boilerplate code to start your next big javascript project. We incorporate the best design practices with best in market open source libraries.
MIT License
278 stars 79 forks source link

How to bind a view model to a created modal window? #19

Closed mtabaj closed 7 years ago

mtabaj commented 11 years ago

Hello, In a component I create a modal window responding to an event:

var Component = function(moduleContext) {

    var vm = null;

    this.initialize = function (parent) {

        vm = new ViewModel(moduleContext);

        moduleContext.listen("loginClicked", function () {
            var newWindow;

            newWindow = window.open("", "login", "width=400,height=400);
            newWindow.document.write(template);

               // THIS DOESN'T WORK---------------------------------------------------------------
            ko.applyBindings(vm, newWindow.document.getElementById('body'));
               // -----------------------------------------------------------------------------------------------------
        });
    };
}
    return Component;

});

The template (view.html) is the following: <!DOCTYPE html>

Login

Everything seems to work, but the created window is not binded to the viewmodel.

Thanks for your help, Marcos

hasith commented 11 years ago

I don't think this is possible, because from one window you cant bind to objects on another window. There are 2 alternatives you may take: 1) Do not use separate windows here.. you are within a Single Page App and therefore use a JavaScript dialog component (such as http://jqueryui.com/dialog/) instead 2) For this particular example of "login", I would recommend you to have a separate login page which is invoked before you come in to the application. If you are successfully loggedIn in that page only you will be redirected to the SinglePage application. This is the recommended way I believe.