显示模型数据 编辑页面


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

附加资源