在 EmberJS 中构建自动刷新的嵌套列表

我如何在 EmberJS 中动态生成和更新嵌套列表？

我的模型看起来像：

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

The parentId代表id直接父元素的。

如果我有数据（控制器内容中的模型实例），例如：

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

我想得到一个像这样的列表：

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

这就是我得到的：http://jsfiddle.net/LhTCm/ http://jsfiddle.net/LhTCm/（不可运行，但很容易理解）。

正如我之前提到的，我想构建一个嵌套列表，一旦模型数据发生变化，该列表就会自动更新。

希望您能帮忙！

那么您首先需要的是一个更好的对象模型。将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>

如果您的模型变得越来越复杂，您可能还需要查看 ember-data (https://github.com/emberjs/data https://github.com/emberjs/data)