首页 > 移动平台 > 详细

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

时间:2015-10-03 18:08:01      阅读:299      评论:0      收藏:0      [点我收藏+]
在构建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,模拟从服务器端获取数据。

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

原文:http://www.cnblogs.com/hu-clover/p/4853646.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!