每个绑定的多个模型绑定和调试数据

Question

我使用以下语法将三个视图模型绑定附加到单个页面：

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

我想在测试页面时进行数据转储以观察模型状态。在我走多模型路线之前，我使用以下内容查看页面底部的页面模型数据。

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

很自然，既然 $root 上下文已被移入特定元素，那么仅使用 $root 就不会返回任何内容。我很难理解如何定位每个单独的视图模型，以便查看每个视图的特定数据。

我尝试将新模型分配为全局变量

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

并使用了以下示例：

<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>

在任何这些测试中都不返回任何内容

由于我显然不了解这里的范围，我希望有人能教育我了解我缺少什么。

谢谢你，

卡里。

*为拼写而编辑。

Answer 1

您可以将调试字段绑定到视图模型的组合：

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/

或者，您应该能够访问全局变量。 （假设它们确实是全局变量）

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

Answer 2

我更喜欢创建处理 ko.toJSON 方法的辅助函数。然后我在调用助手的视图模型上放置一个 ko.computed。这样我可以将视图模型上的 ko.computed 绑定到视图并显示它。如果我有多个视图模型绑定到一个视图，我可以使用标准绑定在同一页面上为每个视图模型显示一个。

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

Answer 3

语法是

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

参见http://jsfiddle.net/photo_tom/eY9w8/9/ 的示例。如果单击任何列，您可以看到输出变化。