Question

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

我的模型看起来像：

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

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/（不可运行，但很容易理解）。

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

希望你能帮忙！

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）

，您也可能需要查看余烬数据

在EmberJS中构建一个自动刷新的嵌套List

1 个答案: