一个最常见的用户界面任务是显示一个列表的东西。本课程的例子是要在页面上显示的用户列表，用到的知识主要就是handlebars.js模版表达式。

显示一个数据列表和模板

json（

我们要显示要显示的数据如下：

var users = [  {    id: 1,    first: 'Ryan',    last: 'Florence',    avatar: 'https://si0.twimg.com/profile_images/3123276865/5c069e64eb7f8e971d36a4540ed7cab2.jpeg'  },  {    id: 2,    first: 'Tom',    last: 'Dale',    avatar: 'https://si0.twimg.com/profile_images/1317834118/avatar.png'  },  {    id: 3,    first: 'Yehuda',    last: 'Katz',    avatar: 'https://si0.twimg.com/profile_images/3250074047/46d910af94e25187832cb4a3bc84b2b5.jpeg'  }];

核心的语句就是这几句：

    
       {
   {#each user in model}}  //{
   {each}}是块表达式，用来遍历model中每一个用户；    
     
{
   {user.first}} {
   {user.last}}
  //用来显示用户的名字；  {
   {/each}}  //块表达式结束
    

我们还是定义一个命名空间和路由，并且定义给该路由提供数据的模型model：

var App = Ember.Application.create();App.ApplicationRoute = Ember.Route.extend({  model: function() {    return users;  }});

要显示用户列表的代码：

ul class="nav well">  {
   {#each model}}  //{
   {each}}块语句遍历模型中的每一个数据；    
{
   {first}} {
   {last}}
  {
   {/each}}

这个例子很简单，其实使用默认顶级模版Application就够了，但如果显示的内容很多，都放在顶级模版里可能不是个好的选择，模版里的内容会看起来相当复杂；这里我们不采用顶级模版，另外定义一个新的user的模版。

你可能已经看出来了，user模板里定义了显示了客户的头像、姓名的表达式，那顶级模板Application里的{

{each}}语句怎么使用这个模版的渲染呢？

    
       {
   {#each model}}    {
   {render "user" this}}  //由于新定义的`user`模版，已经定义了显示客户头像、姓名的块语句，这里只需要告诉`ember`找到`user`模版渲染遍历到的用户数据，                            //就可以在页面显示出来了；参数`this`是上下文，在这里每一个数据单位是一位用户，用户数据成了模版`user`的上下文；  {
   {/each}}
    

完整代码：