其实，这里有个“潜规则”：如果我们没有定义ApplicationView（应用程序视图），那么Ember会自动生成一个ApplicationView并且默认加载名为application的模板，假设，我们把模板重命名为application1，那么默认的ApplicationView将找不到要加载的模板。

当然，我们也可以通过定义ApplicationView来指定需要加载的模板名称，具体实现如

// Defines an application view, then loading // relative templates. App.ApplicationView = Ember.View.extend({ templateName: 'application1' });

现在，我们还有一个疑问就是表达式{{outlet}}中的内容该如何加载显示呢？

路由（Routing）

由于{{outlet}}的内容是根据路由选择后动态获取的模板内容，所以我们先介绍Ember程序的路由，它可以帮助管理应该程序的状态和用户导航所需资源的资源；当我们的应用程序启动时，路由是负责显示模板，加载数据，以及管理应用程序的状态。

现在，我们通过指定URL方式义来定义应用程序的路由，具体定义如下：

// Defines a goal routing home and // the detail information of employee routing. App.Router.map(function() { this.route("home", {path: "/"}); this.route("employee", {path: "/employee/:employee_id"}); });

上面，我们定义了两个路由分别是：应用程序的全局路由home和employee，在index页面进行加载同时访问home路由的模板，数据和应用程序状态；而employee路由将根据employee_id访问每个一个员工的基本信息。

接下来，我们定义home模板，具体实现如下：

="home"> <h3>Employee Information</h3> <ul> {{#each item in employeeInfo}} <li>item</li> {{each}} </ul> </script>

上面，我们定义了home模板，并且使用了each表达来迭代访问employeeInfo对象中的元素，这时我们又有一个疑问了，那就是employeeInfo对象从哪里获取呢？

前面，我们提到Controller负责从Model中获取数据，然后通过模板加载显示，那么我们可以通过显市定义Controller来获取数据，如果我们不定义的话，Ember会自动生成一个HomeController。

// Defines a custom controll. App.HomeController = Ember.Controller.extend({ employeeInfo: ['Jackson Huang', 'Ada Li', 'JK Rush'] });

上面，我们自定义了HomeController并且初始化了employeeInfo数组，现在我们刷新一下index页面。

图3 Index页面

现在，我们又有一个疑问了，假如，我们程序有很多资源要访问，那么我们是否都显式地定义Controller呢？

其实，我们还可以通过定义路由控制器实现自动选择控制器，而且Ember会自动生成相应的Controller无需我们编写任何代码，具体实现如下：

// Defines a routing handler. App.HomeRoute = Ember.Route.extend({ model: function(){ return ['Jackson Huang', 'Ada Li', 'JK Rush']; }, setupController: function(controller, model){ controller.set('content', model) } });

现在，我们定义了路由控制器App.HomeRoute并且重写了方法setupController，它接收路由处理程序匹配的控制器作为第一个参数即HomeController，接着我们给HomeController传递model参数，那么HomeController就可以获取相应的数据并且加载到模板中显示了。

上面，我们成功把数据加载到页面中，但是数据都是直接hardcode在Controller中，我们并没有定义Model来获取数据。

接下来，我们将实现从Fixtures中获取数据，这时我们需要使用ember-data.js库，具体实现如下。

// Customs a store. App.Store = DS.Store.extend({ // Notify the version of ember data api used. revision: 12, // Used FixtureAdapter. adapter: 'DS.FixtureAdapter' });

上面，我们在app.js中定义DS.Store的子类App.Store，并且申明我们程序使用Ember data api的版本是12，当api版本更新或使用的版本太旧时，ember-data.js就会返回相应的错误信息。

例如：当前的ember-data.js版本是12，如果我们在app.js中定义使用的是版本1的api，在控制台中我们就会看到以下的错误信息。

图4 ember-data.js版本信息

模型（Model）

模型是一个用来表示应用程序数据的对象，它可能是一个简单的数组或通过RESTful API动态检索的数据；ember-data.js提供加载、映射和更新应用程序模型的API。

ember-data.js为每个应用程序都提供存储空间，存储空间负责保持已加载的Model和检索还未加载的Model。

前面，我们定义了应用程序App，现在，需要给程序提供数据也就是员工信息，所以我们要创建程序的模型（实体）Employee，接下来我们将实现模型的定义。

// Defines a employee model. App.Employee = DS.Model.extend({ name: DS.attr('string'), department: DS.attr('string'), title: DS.attr('string') })

上面，我们定义了Employee模型，它继承了DS.Model并且包含三个字段分别是name，department和title。