Question

I have three view model bindings attached to a single page using the following syntax:

ko.applyBindings(new SomeViewModel(), document.getElementById("some-id-element"));

I would like to do a data dump to watch the model states as I test the page. Before I went the multiple model route I was using the following to review the page model data at the bottom of my page.

<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

Naturally, now that the $root context has been moved in to specific elements nothing is returned using just $root. I’m having a hard time understanding how I can target each separate view model so I can see each view’s specific data.

I’ve tried assigning a new model as a global variable

testVar = new SomeViewModel();
ko.applyBindings(testVar, document.getElementById("some-id-element"));

And used the following examples:

<pre data-bind="text: ko.toJSON(testVar, null, 2)"></pre>
<pre data-bind="text: ko.toJSON(testVar.$root, null, 2)"></pre>
<pre data-bind="text: ko.toJSON($element.some-id-element, null, 2)"></pre>

Nothing is returned in any of these tests

As I clearly do not understand the scoping here, I hope someone can educate me as to what I am missing.

thank you,

Cary.

*edited for spelling.

Answer 1

You could bind the debug field to the composition of the view-models:

ko.applyBindings({vm1: vm1, vm2: vm2, vm3: vm3},
    document.getElementById("debug"));

<div id="debug">
    <pre data-bind="text: ko.toJSON(vm1, null, 2)"></pre>
    <pre data-bind="text: ko.toJSON(vm2, null, 2)"></pre>
    <pre data-bind="text: ko.toJSON(vm3, null, 2)"></pre>
</div>

​
http://jsfiddle.net/MizardX/jxM9f/

Alternatively, you should be able to access global variables. (Assuming they really are global variables)

http://jsfiddle.net/MizardX/2Y6DF/