data-bind=“click” not working with nested knockout view model

Question

I have a knockout view model that is set up as an observable as my main view model. In the child element, it seems that I can't set up data-bind="click: the same way that I can when I am in the parent element.

My html:

 <button id="myButton" type="button" class="btn btn-lg btn-primary" data-bind="click: test">Click Me</button>

In my main view model:

 self.childElement = ko.observable(new childElementVm());

and in childElementVm

var childElementVm= function () {
    var test = function(){
        alert('this is a test');
    }
}

what do I need to do differently to use data-bind="click: test" here? To note, my applyBindings is fine (other knockout observables are functioning correctly) and the button is contained inside of a <div data-bind="with: childElement"

EDIT: here is a fiddle

Answer 1

Your test function is scoped to the childElementVm only. Change your implementation to this:

var childElementVm= function () {
    this.test = function(){
        alert('this is a test');
    }
}

or this:

var childElementVm= function () {
    var self = this;
    self.test = function(){
        alert('this is a test');
    }
}

Here is a working example