partial view models

by bradleytrager

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<span id="main">
    <h3 data-bind="text:vmMain.view"></h3>
    <input data-bind="value:vm1.name" /> 
    <input data-bind="value:vmMain.view" /> 
</span>

<span id="main2">
    <span data-bind="text:vm1.name"></span>
</span>
<div id="part">
    <h3 data-bind="text:vmMain.view"></h3>
    <input data-bind="value:vm2.name" /> <span data-bind="text:vm2.name"></span>

</div>

JavaScript

function viewModel1() {
    this.name = ko.observable();
}

function mainViewModel() {
    this.view = ko.observable("View");
}

function viewModel2() {
    this.name = ko.observable();
}
vmMain = new mainViewModel();

var vm1 = {
    vmMain: vmMain,
    vm1: new viewModel1()
};
var vm2 = {
    vmMain: vmMain,
    vm2: new viewModel2()
};


ko.applyBindings(vm1, document.getElementById('main'));
ko.applyBindings(vm1, document.getElementById('main2'));
ko.applyBindings(vm2, document.getElementById('part'));