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

Building a auto-refreshing, nested List in EmberJS

本文关键字：刷新 列表 嵌套 一个 EmberJS 构建      更新时间：2023-09-26

如何在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就会自动更新。

希望你能帮忙！

首先需要的是一个更好的对象模型。将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数据(https://github.com/emberjs/data)

相关文章：