CODEWITHSUNDEEP
knockout.js
user305015
user305015

Reputation: 103

Cannot Init Late Binding Knockout

I have main view model which has sub models these are used on same page. I want to load some hidden sub view when button click. Bu it's not working like that:

function mainViewModel() {

        var self = this;

        self.moduleIn = createSubViewModel(moduleViewModel);
        self.module1 = ko.observable();

        // this module will loaded after menu click
        self.loadModule1 = function() {
           // create only first attempt
           if (typeof self.module1 == 'function') {
                 self.module1 = createSubViewModel(module1ViewModel);
           }
        }
}

ko.applyBindings(new mainViewModel);

Here is action button

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

My goal is fill this view, but no change in it?

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

Upvotes: 0

Views: 171

Answers (1)

milagvoniduak
milagvoniduak

Reputation: 3254

module1 is an observable so you have to set it appropriately, you were overriding it. 

function mainViewModel() {

        var self = this;

        self.moduleIn = createSubViewModel(moduleViewModel);
        self.module1 = ko.observable();

        // this module will loaded after menu click
        self.loadModule1 = function() {
           // create only first attempt
           if (typeof self.module1 == 'function') {
                // setting module1
                 self.module1(createSubViewModel(module1ViewModel));
           }
        }
}

Also not sure what you were trying to accomplish with data-bind="click: loadModule1.bind($data)". You can just bind loadModule1 to the click event.

<div data-bind="click: loadModule1">Module 1</div>


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

Upvotes: 1

Related Questions