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

Проблема была легко выяснить, как только я нашел способ отладить текущий контекст для нокаута. Вы можете использовать либо 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>