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

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

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

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

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

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

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

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

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

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

在线演示

Ember.js • TodoMVC

附加资源