knockout.js再帰的バインディング

Question

私はノックアウト（少なくとも私のような初心者のために）といくつかの複雑なバインディングをしようとしています。

は、以下のデータを考慮してください。

var originalData = { 
id: 1, 
name: "Main", 
children: [ { id: 2, name: "bob", children: []}, { id: 3, name: "ted", children: [{id: 5, name:"albert"}, {id: 9, name: "fred"}]} ], 
selectedChild: { id: 2, name: "bob" } 
}; 

<table> 
<tr> 
    <td data-bind="text: name"></td> 
</tr> 
<tr data-bind="if: children().length > 0"> 
    <td> 
     <select data-bind="options: children, 
      optionsText: function(item){ 
       return item.name; 
        }, 
      optionsCaption: 'Choose...'"></select>  
    </td> 
</tr> 

[OK]を、それは簡単な部分でした。

難しい部分は、リスト内のアイテムが選択されるたびに、このアイテムに子がある場合は新しい選択ボックスがその下に表示されることです。そのデータソースは、最初の選択ボックスで選択された項目の子になります。もちろん、どんなレベルの深さでも続けることができます。

ノックアウトでこの問題を解決するにはどうすればよいですか？

私は一緒に私はjsfiddleに、これまで持っているもののサンプルを入れている：http://jsfiddle.net/graphicsxp/qXZjM/

Answer 1

あなたはscriptタグにテンプレートを置くことによって、ノックアウトで再帰テンプレートを使用することができます。 scriptタグ内のテンプレートは次のように、自分自身を参照することができます。ここでは

<div data-bind="template: 'personTemplate'"></div> 

<script type="text/ko" id="personTemplate"> 
    <span data-bind="text: name"></span> 
    <select data-bind="options: children, optionsText: 'name', optionsCaption: 'Choose', value: selectedChild"></select> 
    <!-- ko if: selectedChild --> 
    <div data-bind="template: { name: 'personTemplate', data: selectedChild }"></div> 
    <!-- /ko --> 
</script> 

があるthe fiddle

---

更新：

あなたは簡単にこれを行うにはcomputedを使用して、削除することができますロジック（私はこの場合は良いと思う）からビューを取得し、ifをバインドします。

self.showChildren = ko.computed(function() { 
    return self.selectedChild() 
     && self.selectedChild().children().length > 0; 
}); 

あなたはifブロックの両方を入れたい場合は、あなただけの括弧を含める必要がすることができます。この理由は、オブザーバブルが関数であることです。ノックアウトを使用すると、単一参照のみを使用している場合にそれらを除外できますが、それらのプロパティに "ドリルダウン"する必要があります。ここで

if: selectedChild() && selectedChild().children().length > 0 

私の心に来るupdated fiddle