Knockoutjs：跟踪递归深度？

Question

我使用的是递归模板，可以简单地总结如下：

<script id="template-name" type="text/html">
    <div data-bind="foreach: $data">
        <span data-bind="text: title"></span>
        <div data-bind="template: { name: 'template-name', data: children }"></div>
    </div>
</script>

<div data-bind="template: { name: 'template-name', data: $data }"></div>

然而，我想做的是以某种方式跟踪当前的递归深度。我将如何使用 Knockout 来解决这个问题？
我尝试了多种方法，但我对 Knockout 还不够熟悉，无法弄清楚我在哪里犯了错误。

<script id="template-name" type="text/html">
    <div data-bind="foreach: $data[0]">
        <span data-bind="text: $data[1].toString()"></span>:<span data-bind="text: title"></span>
        <div data-bind="template: { name: 'template-name', data: ko.observableArray([children, ++$data[1]]) }"></div>
    </div>
</script>

<div data-bind="template: { name: 'template-name', data: ko.observableArray([$data, 0]) }"></div>

Answer 1

一旦我找到一种方法来调试 Knockout 的当前上下文，问题就很容易解决了。您可以使用 the Knockout Context Debugger 或使用

将原始 json 扔到您的文档中

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

最后，我使用的语法是

<script id="template-name" type="text/html">
    <div data-bind="foreach: $data.children">
        <span data-bind="text: $parent.depth"></span>:<span data-bind="text: title"></span>
        <div data-bind="template: { name: 'template-name', data: { children: children, depth: ($parent.depth + 1) } }"></div>
    </div>
</script>

<div data-bind="template: { name: 'template-name', data: { children: $data, depth: 0 } }"></div>

Knockoutjs：跟踪递归深度？

Knockoutjs: Keep track of recursion depth?

javascript

recursion

knockout.js