EmberJSで自動リフレッシュ、ネストされたリストを構築する

Question

EmberJSでネストされたリストを動的に生成して更新する方法を教えてください。

App.Node = Em.Object.extend({ 
    id: 0, 
    parentId: 0, 
    title: "" 
}); 

parentIdは、直接の親要素のidを表します

私のモデルのようになります。私のようなデータ（コントローラの内容に横たわっているモデルのインスタンス）がある場合は

は：

<ul> 
    <li>Parent Element</li> 
    <ul> 
     <li>Child Element</li> 
    </ul> 
</ul> 

これは私が得たものである：

[{ 
    id:1, 
    title:"Parent Element" 
}, { 
    id:2, 
    parentId:1, 
    title:"Child Element" 
}] 

を私のようなリストを取得したいです：http://jsfiddle.net/LhTCm/（実行可能ではありませんが、理解しやすいです）。

私が前に述べたように、モデルデータが変更されると自動的に更新されるネストされたリストを作成したいと思います。

希望すると助かります！

Answer 1

最初に必要なのは、より良いオブジェクトモデルです。あなたのオブジェクトにparentIDを格納することはあまり役に立ちません。オブジェクトを実際に参照する必要があります。両方向に最適です。表示したいだけの場合は、子を保存するだけで問題ありません。モデルは次のようになります。

App.Node = Em.Object.extend({ 
    id: null, 
    parent: null, 
    title: "", 
    children: [] 

}); 

次に、データを読み込むときには、正しくマップする必要があります。

あなたの実際のテンプレートは、この

<ul> 
    {{#each node}} 
    <li>{{title}} 
     {{#each children}} 
      <ul><li>{{title}}</li></ul> 
     {{/each}} 
    </li> 
    {{/each}} 
</ul> 

次のようになります。また、あなたのモデルがより複雑になっている場合燃えさしデータで見たいと思うかもしれません（https://github.com/emberjs/data）