接下来，我们通过定义App.Employee.FIXTURES，模拟从服务器端获取数据。

// Defines a JSON array. App.Employee.FIXTURES = [ { id: 1, name: 'Jackson Huang', department: 'IT', title: 'programmer' }, { id: 2, name: 'Ada Chen', department: 'purchasing', title: 'buyer' }, { id: 3, name: 'JK Rush', department: 'IT', title: 'programmer' }, { id: 4, name: 'Lucy Liu', department: 'IT', title: 'tester' }, { id: 5, name: 'Julia Liu', department: 'HR', title: 'Manager' } ];

上面，我们定义了JSON数组App.Employee.FIXTURES，它包含了一系列员工的基本信息。

接下来，我们修改home和添加employee模板，具体实现如下：

<!-- Home temp START --> ="home"> <h3> Employee Information</h3> <ul> {{#each item in content}} <li>{{item}}</li> {{/each}} </ul> <h3> Employee</h3> <ul> {{#each employee in employees}} {{#linkTo "employee" employee}} <p> {{employee.name}} </p> {{/linkTo}} {{/each}} </ul> </script> <!-- Home temp END --> <!-- Employee temp START --> ="employee"> <div> <h3> Name: {{name}}</h3> <p> Department: {{department}} </p> <p> Title: {{title}} </p> {{#linkTo home}}Back{{/linkTo}} </div> </script> <!-- Employee temp END -->

在home模板中，我们添加each表达式迭代访问employee元素，然后通过linkTo选择employee路由；然后根据路由选择在employee模板显示相应的员工信息。

 

    

图5 程序页面

现在，我们完成了Employee程序的基本功能了，提供用户查下员工的信息了。

1.1.3 总结

本文通过Demo例子介绍了Ember的使用，主要介绍了Ember的模型，控制器、模板和路由，由于Ember是Javascript MVC框架，而且作为初学者很容易困惑于它的自动生成和默认规则，所以我极力推荐大家要仔细看一遍Routing和Controller的官方文档。

我们通过介绍Ember的Handlerbars模板引擎，定义了Demo程序的页面，然后通过路由控制器定义路由行为，根据路由行为选择控制器，控制器负责数据加载和显示。但我们的例子中还没有设计的Ember视图模块，如果想进一步学习请参考官方文档或书籍。

参考

posted @