Question

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

这是基本的例子。假设我想显示2个todo项目列表（不完整和已完成）：

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

尝试在项目中使用内置方法提供的ember，帮助程序。在您的情况下，在模板中使用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>

Here是一个有效的jsbin示例。

在Ember中使用树状结构

1 个答案: