How to bind a viewmodel in another viewmodel in knockout? - mvvm

Question

I have a div which contains another div. The inner and outer div have bindings of two ViewModel. The inner ViewModel bindings do not work. My code looks like:
<div class='liveExample'>
<p>First name: <input data-bind='value: firstName' /></p>
<p>Last name: <input data-bind='value: lastName' /></p>
<h2>Hello, <span data-bind='text: fullName'> </span>!</h2>
<div class='liveExample2'>
<p>First name: <input data-bind='value: firstName2' /></p>
<p>Last name: <input data-bind='value: lastName2' /></p>
<h2>Hello, <span data-bind='text: fullName2'> </span>!</h2>
</div>
</div>
// Here's my data model1
var ViewModel = function(first, last) {
this.firstName = ko.observable(first);
this.lastName = ko.observable(last);
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this);
};
// Here's my data model2
var ViewModel2 = function(first, last) {
this.firstName2 = ko.observable(first);
this.lastName2 = ko.observable(last);
this.fullName2 = ko.computed(function() {
return this.firstName2() + " " + this.lastName2();
}, this);
};
ko.applyBindings(new ViewModel("Planet", "Earth"),document.getElementById('liveExample'));
ko.applyBindings(new ViewModel2("Planet2", "Earth2"),document.getElementById('liveExample2'));

Answer 1

Your requirement can be accomplished by using a custom binding. Also you do not need two ViewModels here. It's just duplication of code.
jsFiddle here
<div id='liveExample'>
<p>First name: <input data-bind='value: firstName' /></p>
<p>Last name: <input data-bind='value: lastName' /></p>
<h2>Hello, <span data-bind='text: fullName'> </span>!</h2>
<div data-bind="stopBinding: true">
<div id='liveExample2'>
<p>First name: <input data-bind='value: firstName' /></p>
<p>Last name: <input data-bind='value: lastName' /></p>
<h2>Hello, <span data-bind='text: fullName'> </span>!</h2>
</div>
</div>
</div>
ko.bindingHandlers.stopBinding = {
init: function() {
return { controlsDescendantBindings: true };
}
};
// Here's my data model1
var ViewModel = function(first, last) {
this.firstName = ko.observable(first);
this.lastName = ko.observable(last);
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this);
};
ko.applyBindings(new ViewModel("Planet","Earth"),document.getElementById('liveExample'));
ko.applyBindings(new ViewModel("Planet2","Earth2"),document.getElementById('liveExample2'));