入门指南 - 显示模型数据
优质
小牛编辑
133浏览
2023-12-01
英文原文：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浏览器，以确保所有文件均被正确引用，且没有发生任何错误。