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: 
I prefer to create helper function that handles the ko.toJSON method. Then I place a ko.computed on my viewmodel that call the helper. This way I can bind the ko.computed on the viewmodel to the View and display it. If I have multiple viewmodels bound to a single view I can show one per viewmodel on the same page using a standard binding.

```
<pre data-bind="text: debugInfo"></pre>

```
Syntax is 

```
<div data-bind="text: ko.toJSON($root)"></div>​

```

See example at <http://jsfiddle.net/photo_tom/eY9w8/9/>. If you click on any of the columns, you can see the output change.