Ember——在构建Ember应用程序时,我们会使用到六个主要部件:应用程序(Application)、模型(Model)、视图(View)、模板(Template)、路由(
在构建Ember应用程序时,我们会使用到六个主要部件:
模板(Template)、应用程序(Application)、视图(View)、路由(Routing)、控制器(Controller)和模型(Model)。
第一步:创建index.html页面
第二步:模板(Handlebars)
它让开发人员可以混合原始HTML和Handlebars表达式生成渲染相应的HTML;表达式以包括在{{}}中,我们可以通过两种方法把 Handlebars模板加载到页面中
![](https://images2015.cnblogs.com/blog/818394/201510/818394-20151003173805840-494740743.png)
第三步:应用程序(Application)
每个Ember应用程序都需要一个Ember应用程序实例,接下来让我们在app.js中创建第一个Ember应用程序实例吧!
![](https://images2015.cnblogs.com/blog/818394/201510/818394-20151003173829761-718490107.png)
其实,这里有个“潜规则”:如果我们没有定义ApplicationView(应用程序视图),那么Ember会自动生成一个 ApplicationView并且默认加载名为application的模板,假设,我们把模板重命名为application1,那么默认的 ApplicationView将找不到要加载的模板。
当然,我们也可以通过定义ApplicationView来指定需要加载的模板名称,具体实现如
![](https://images2015.cnblogs.com/blog/818394/201510/818394-20151003173851730-1808132494.png)
第四步:路由(Routing)
{{outlet}}的内容是根据路由选择后,动态获取的模板内容
它可以帮助管理应用程序的状态和用户导航所需资源的资源;当我们的应用程序启动时,路由是负责显示模板,加载数据,以及管理应用程序的状态。
![](https://images2015.cnblogs.com/blog/818394/201510/818394-20151003173915918-185187464.png)
上面,我们定义了两个路由分别是:应用程序的全局路由home和employee,在index页面进行加载同时访问home路由的模板,数据和应用程序状态;
而employee路由将根据employee_id访问每个一个员工的基本信息。
接下来,我们定义home模板,具体实现如下:
![](https://images2015.cnblogs.com/blog/818394/201510/818394-20151003173943371-288693145.png)
使用了each表达来迭代访问employeeInfo对象中的元素,这时我们又有一个疑问了,那就是employeeInfo对象从哪里获取呢?
第五步:控制器Controller
Controller负责从Model中获取数据,然后通过模板加载显示,那么我们可以通过显市定义Controller 来获取数据,如果我们不定义的话,Ember会自动生成一个HomeController。
![](https://images2015.cnblogs.com/blog/818394/201510/818394-20151003174005824-1634657194.png)
上面,我们自定义了HomeController并且初始化了employeeInfo数组,现在我们刷新一下index页面。
![](https://images2015.cnblogs.com/blog/818394/201510/818394-20151003174205824-926854319.png)
第六步:模型(Model)
模型是一个用来表示应用程序数据的对象,它可能是一个简单的数组或通过RESTful API动态检索的数据;
ember-data.js为每个应用程序都提供存储空间,存储空间负责保持已加载的Model和检索还未加载的Model。
![](https://images2015.cnblogs.com/blog/818394/201510/818394-20151003174233121-2102870276.png)
创建程序的模型(实体)Employee,接下来我们将实现模型的定义。
![](https://images2015.cnblogs.com/blog/818394/201510/818394-20151003174252261-111049871.png)
定义了Employee模型,它继承了DS.Model并且包含三个字段分别是name,department和title。
接下来,我们通过定义App.Employee.FIXTURES,模拟从服务器端获取数据。