Multiple Knockout VMs

by Kaeden

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<div data-bind="">
    <div data-bind="with:modelA">
        <div data-bind="text:valueA"></div>
    </div>
    <div id="divB"></div>
</div>
<button onclick="addB();">Add Span B</button>
<button onclick="modelA.valueA('new value');">Update Model A</button>
<button onclick="modelB.valueB('new valueB');">Update Model B</button>

JavaScript

modelA = {
    valueA: ko.observable("Hello")
};

modelB = {
    valueB: ko.observable("World")
};

appModel = {
    modelA: modelA
};

addB = function() {
    $('#divB').append('<span id="spanB" data-bind="text:valueB"></span>');
    appModel.modelB = modelB;
    ko.applyBindings(modelB, $('#spanB')[0]);
};

ko.applyBindings(appModel);