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放在我调用帮助器的viewmodel上。这样我就可以将viewmodel上的ko.computed绑定到View并显示它。如果我有多个视图模型绑定到单个视图，我可以使用标准绑定在同一页面上显示每个视图模型一个。

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

Answer 3

语法是

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

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

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

3 个答案: