在EmberJS中构建自动刷新嵌套列表 [英] Building a auto-refreshing, nested List in EmberJS

问题描述

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

我的模型看起来像：

  App.Node = Em.Object.extend（{
 id：0，
 parentId：0，
 title：
}）; 
  

parentId 表示<$ c $直接父元素的c> id

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

  [{
 id：1，
 title：Parent Element
} {
 id：2，
 parentId：1，
 title：Child Element
}] 
  

我想得到一个列表，如：

 < ul> 
< li>父元素< / li> 
< ul> 
< li>子元素< / li> 
< / ul> 
< / ul> 
  

这是我得到的： 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 }}< /立GT;< / UL> 
 {{/ each}} 
< / li> 
 {{/ each}} 
< / ul> 
  

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

how can i achieve to dynamically generate and update a nested list in EmberJS?

My Model looks something like:

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

The parentId represents the id of the direct parent element.

If i have data (instances of the model lying in the content of the controller) like:

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

I want to get a list like:

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

This is what i got: http://jsfiddle.net/LhTCm/ (not runnable, but its easy to understand).

As i mentioned before, i want to build a nested list, which ui updates automatically as soon as the model-data changes.

Hope you can help!

解决方案

Well the first thing you'll need is a better object model. Storing the parentID on your object doesn't help a lot. You need actual references to your objects, best in both directions, if you just want to display it, just storing the children will be fine as well. Your model should look like this:

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

});

Then when you load in your data, you'll have to make sure that you map them correctly.

Your actual template would look like this

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

You also might want to look at ember-data if your model is getting more complex (https://github.com/emberjs/data)

这篇关于在EmberJS中构建自动刷新嵌套列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！