显示模型数据 编辑页面

英文原文：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

附加资源