knockout.js - Cannot Init Late Binding Knockout -

knockout.js - Cannot Init Late Binding Knockout -

i have main view model has sub models these used on same page. want load hidden sub view when button click. bu it's not working that:

function mainviewmodel() { var self = this; self.modulein = createsubviewmodel(moduleviewmodel); self.module1 = ko.observable(); // module loaded after menu click self.loadmodule1 = function() { // create first effort if (typeof self.module1 == 'function') { self.module1 = createsubviewmodel(module1viewmodel); } } } ko.applybindings(new mainviewmodel);

here action button

<div data-bind="click: loadmodule1.bind($data)">module 1</div>

my goal fill view, no alter in it?

<div data-bind="with: module1"> ... </div>

module1 observable have set appropriately, overriding it.

function mainviewmodel() { var self = this; self.modulein = createsubviewmodel(moduleviewmodel); self.module1 = ko.observable(); // module loaded after menu click self.loadmodule1 = function() { // create first effort if (typeof self.module1 == 'function') { // setting module1 self.module1(createsubviewmodel(module1viewmodel)); } } }

also not sure trying accomplish data-bind="click: loadmodule1.bind($data)". can bind loadmodule1 click event.

<div data-bind="click: loadmodule1">module 1</div> <div data-bind="with: module1"> ... </div>

knockout.js