在 Ember 中使用树状结构

Question

我主要了解与路由、模板、控制器相关的 Ember 基础知识（或这么认为），它很容易在简单示例中使用，但我不知道如何使用树状结构的好方法。

这是基本示例。假设我想显示 2 个待办事项列表（不完整和已完成）：

Incomplete
 1. Todo1
 2. Todo2
Complete
 1. TodoDone1
 2. TodoDone2

我知道 2 种如何在 Ember 中实现它

的方法

1） 使用路由嵌套并在单独的模板、单独的模型中显示这些列表：

App.Router.map(function() {
    this.resource('todo', function() {
        this.route('todocompleted');
    });
});

2） 使用计算机属性，过滤一个模型并返回列表以显示在一个模板中

App.TodoController = Ember.ArrayController.extend({
    todoIncoplete: function() {
        // filter model and return list
    }.property('model.@each'),
    todoComplete: function() {
        // filter model and return list
    }.property('model.@each'),
});

这是正确的实现吗？或者你能给我任何建议吗？

Answer 1

尝试在项目中使用余烬提供的内置方法和助手。在您的情况下each在模板中使用帮助程序将是最好的 ember 编码实践。

App = Ember.Application.create({});

App.TodoController = Ember.ObjectController.extend({
    incomplete : ['Todo1','Todo2'],
    completed : ['TodoDone1','TodoDone2']
}); 

车把模板代码：

Incomplete:
<ol>
 {{#each task in incomplete}}
   <li>{{task}}</li>
 {{/each}}
</ol>  
Complete:
<ol>
 {{#each task in completed}}
   <li>{{task}}</li>
 {{/each}}
</ol>

这是一个有效的 jsbin 示例。