javascript - ネストされたナビゲーションをノックアウトJSでレンダリングするにはどうすればよいですか?

Question

ナビゲーションを表すネストされた配列があります (以下の jsFiddle を参照)。このナビゲーションをノックアウト JS でレンダリングしたいのですが、方法がわかりません。私はすでに公式ドキュメントを調べましたが、それらは単純なリスト/コレクションのみをカバーしています.

http://jsfiddle.net/a4swJ/

Answer 1

テンプレートバインディングを使用する必要があります。

更新:コンテナーレスの foreach を削除し、代わりにテンプレート バインディングの foreach オプションを使用しました。以下の作業例も更新されました

HTML:

<script type="text/html" id="node-template">
    <li>
       <a data-bind="text: Title, attr:{href: Target}"></a>
       <ul data-bind="template: { name: 'node-template', foreach: Children }"></ul>
    </li>
</script>
<ul data-bind="template: { name: 'node-template', foreach: Nodes }"></ul>

JS:

function NavigationNode(target, title)
{
    var self = this;

    self.Target = target || "[No Target]";
    self.Title = title || "[No Title]";

    self.Children = ko.observableArray([]);
};

function NavigationViewModel()
{
    var self = this;

    self.Nodes = ko.observableArray([]);

    var node1 = new NavigationNode("/parent", "Parent");
    var node2 = new NavigationNode("/parent/sub1", "Sub 1");
    var node3 = new NavigationNode("/parent/sub1/sub2", "Sub 2");

    node2.Children().push(node3);
    node1.Children().push(node2);

    self.Nodes.push(node1);

    ko.applyBindings(this);
};

new NavigationViewModel();​

ここにjsFiddleがあります。