Ember——在构建Ember应用程序时，我们会使用到六个主要部件：应用程序（Application）、模型（Model）、视图（View）、模板（Template）、路由（

在构建Ember应用程序时，我们会使用到六个主要部件：

模板（Template）、应用程序（Application）、视图（View）、路由（Routing）、控制器（Controller）和模型（Model）。

第一步：创建index.html页面

第二步：模板（Handlebars）

它让开发人员可以混合原始HTML和Handlebars表达式生成渲染相应的HTML；表达式以包括在{{}}中，我们可以通过两种方法把 Handlebars模板加载到页面中

第三步：应用程序（Application）

每个Ember应用程序都需要一个Ember应用程序实例，接下来让我们在app.js中创建第一个Ember应用程序实例吧！

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

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

第四步：路由（Routing）

{{outlet}}的内容是根据路由选择后，动态获取的模板内容

它可以帮助管理应用程序的状态和用户导航所需资源的资源；当我们的应用程序启动时，路由是负责显示模板，加载数据，以及管理应用程序的状态。

上面，我们定义了两个路由分别是：应用程序的全局路由home和employee，在index页面进行加载同时访问home路由的模板，数据和应用程序状态；

而employee路由将根据employee_id访问每个一个员工的基本信息。

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

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

第五步：控制器Controller

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

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

 

第六步：模型（Model）

模型是一个用来表示应用程序数据的对象，它可能是一个简单的数组或通过RESTful API动态检索的数据；

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

创建程序的模型（实体）Employee，接下来我们将实现模型的定义。

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

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