Question

英文原文：http://emberjs.com/guides/getting-started/displaying-model-data/

接下来，我们将更新我们的应用，使其可以显示动态的待办事项，而不再是显示我们在todos模板中硬编码的内容。

在js/router.js这个文件中，通过model函数实现了一个TodosRoute类，这个函数的返回值是所有现存的待办事项：

1 2 3 4 5

Todos.TodosRoute = Ember.Route.extend({ model: function() { return this.store.find('todo'); } });

由于之前我们一直都没有实现这个类，所以Ember.js默认根据对象创建的命名惯例为我们创建了一个Route，这个被Ember.js自动创建的Route将会默认渲染一个名为todos的模板。

现在我们需要自定义的行为（返回一个指定的对象集合），因此我们实现了这个类，并为其添加了期望的行为。

通过删除index.html中的静态元素<li>，用Handlebars的{{each}}助手和每项元素的动态{{title}}来替代。

1 2 3 4 5 6 7 8 9 10

{{! ... 为保持代码简洁，在此省略了其他代码 ... }} <ul id="todo-list"> {{#each todo in model}} <li> <input type="checkbox" class="toggle"> <label>{{todo.title}}</label><button class="destroy"></button> </li> {{/each}} </ul> {{! ... 为保持代码简洁，在此省略了其他代码 ... }}

上面的模板遍历了其控制器的content。这里的控制器是一个ArrayController的实例，ArrayController是Ember.js提供的用于存储我们的对象的容器。因为我们这里并不需要为这个对象添加自定义行为，所以可以使用框架提供的缺省对象。

重新载入你的Web浏览器，以确保所有文件均被正确引用，且没有发生任何错误。

在线演示

Ember.js • TodoMVC

附加资源

• 用diff格式呈现本次修改
• 模板指南
• 控制器指南
• 命名惯例指南