Ember.js用户手册.docx
- 文档编号:18698847
- 上传时间:2023-09-25
- 格式:DOCX
- 页数:76
- 大小:572.22KB
Ember.js用户手册.docx
《Ember.js用户手册.docx》由会员分享,可在线阅读,更多相关《Ember.js用户手册.docx(76页珍藏版)》请在冰点文库上搜索。
Ember.js用户手册
王为坤
目录
修订页 2
目录 -1-
第一章开始 -5-
1.1. 静态应用 -5-
1.2. 动态应用 -8-
1.3. 服务端交互 -10-
第二章概念 -13-
2.1 核心概念 -13-
2.1.1 应用 -14-
2.1.2 路由器 -14-
2.1.3 模型 -14-
2.1.4 模版 -14-
2.1.5 控制器 -15-
2.1.6 视图 -15-
2.2 命名约定 -15-
2.2.1. 应用 -15-
2.2.2. 简单路由 -16-
2.2.3. 动态参数 -18-
2.2.4. 默认的路由器,控制器和模版 -18-
2.2.5. 嵌套路由 -19-
2.2.6. 索引路由 -19-
第三章详解 -22-
3.1 应用 -22-
3.2 路由器 -22-
3.3.1 配置路由器 -22-
3.3.2 定义路由 -23-
3.3.3 资源 -24-
3.3.4 动态参数 -25-
3.3.5 嵌套资源 -26-
3.3.6 指定模型 -26-
3.3.7 设置控制器 -27-
3.3.8 渲染模版 -28-
3.3.9 重定向 -29-
3.3.10 指定url类型 -30-
3.3 模型 -31-
3.4.1 定义Store -31-
3.4.2 定义模型 -32-
3.4.3 查找记录 -33-
3.4.4 修改属性 -34-
3.4.5 模型生命周期 -35-
3.4.6 REST连接器 -36-
3.4 模版 -41-
3.4.1 介绍 -41-
3.4.2 条件 -43-
3.4.3 遍历 -43-
3.4.4 绑定属性 -44-
3.4.5 绑定样式 -45-
3.4.6 链接 -47-
3.4.7 事件 -49-
3.4.8 视图 -51-
3.4.9 非绑定表达式 -51-
3.4.10 自定义模版标记 -51-
3.5 控制器 -52-
3.5.1 ObjectController -52-
3.5.2 ArrayController -53-
3.5.3 依赖关系 -54-
3.6 视图 -55-
3.6.1 定义视图类 -56-
3.6.2 在模版中嵌入视图 -56-
3.6.3 事件处理 -59-
3.6.4 修饰器 -60-
3.6.5 自定义视图元素 -62-
3.6.6 内置视图 -64-
3.6.7 手动管理视图层级 -64-
3.7 对象模型 -66-
3.7.1. 类和实例 -66-
3.7.2. 计算属性 -68-
3.7.3. 观察者 -70-
3.7.4. 绑定 -71-
3.7.5. 枚举 -73-
第四章组件 -74-
4.1. 介绍 -74-
4.2. 组件列表 -74-
附录1事件名对照表 -77-
第一章开始
我会从一个简单的例子开始,围绕这个例子,把框架的核心概念进行基本的讲解。
然后后面会有每个需要关注的点的详细解说。
1.1.静态应用
首先,我们看例子,经典的helloWorld。
doctypehtml>
--
window.UserMgr=Ember.Application.create();
//-->
Hello,World!
这是一个简单示例
这是一个可运行的最简单的应用了。
运行它就可以看到屏幕上的输出。
下面,我们来看代码。
直接看body里的部分。
前面4行是引入框架库文件,接下来就到重点了
window.UserMgr=Ember.Application.create();
这行创建了一个应用。
什么是应用?
简单的说,应用就是整个程序,其他的东西属于应用。
所以创建一个应用就是程序的入口了。
继续往下
Hello,World!
这是一个简单ember.js示例
这是一个模版——应用的主模版。
模版是就是需要显示用户界面。
它是HTML加模版语言。
模版语言上例中还没用到,后面再说。
应用的主模版是在应用启动时自动调用的模版。
下面我们来加入路由器在单个页面中展示多个页面的效果。
我们先简单理解路由器,它负责根据访问地址调用相应的模版(就像我们的web服务器根据访问地址调用不同的html页面一样)。
window.UserMgr=Ember.Application.create();
//路由
UserMgr.Router.map(function(){
this.resource('users',{path:
'/'},function(){
this.route('new');
});
});
其实在应用创建的时候,路由器就已经创建好了。
我们只是进行路由的配置。
上例中,我们配置了两个路由,users和users.new。
resource是一个特殊的路由,它是路由组,是一组路由的父路由。
路由的path表示的是url。
省略path表示path等于路由名。
上面路由配置的意思是,当我们访问地址为/的时候,调用users路由,当访问/new的时候调用users.new路由。
现在我们来增加两个新的模版,注意这里的模版比上面的应用模版多了data-template-name,这是定义模版名字,应用模版的模版名是application,是可以省略的。
模版名需要与路由名对应,users路由对应的users模版,users.new路由对应users/new模版。
这是用户列表页面
这是新建用户页面
我们期望在访问/的时候显示users模版的内容。
刷新页面,没有变化。
为啥呢?
我们忘记告诉框架,新的模版要在哪里显示。
默认的,通过路由调用的模版会显示在父模版的outlet处。
users的父模版是应用主模版。
那么我们就修改一下应用主模版
Hello,World!
这是一个简单示例
{{outlet}}
然后刷新页面。
看到结果了
users/new模版的父模版users里也加上outlet。
这是用户列表页面
{{outlet}}
然后我们在当前地址后面加上#/new。
上面我们其实访问的是#/。
路由匹配的url也是这个#后面的地址。
看到结果如下
1.2.动态应用
上面的的内容都是静态的,下面我们开始加点动态的内容。
先来一个动态的用户列表。
首先改写users模版,模版中用到{{#each}}来遍历。
{{#each}}中用到了controller。
它是users路由关联的控制器,控制器用来给模版提供数据以及处理模版中的事件,这里系统会自动生成,我们先跳过它。
{{u.name}} | {{u.sex}} |
{{outlet}}
有模版了。
然后提供数据给模版,开始实现users路由。
我们实现user路由对应的路由类就可以了,系统会自动调用。
按照命名约定,users路由对应路由类UserMgr.UsersRoute。
UserMgr.UsersRoute=Ember.Route.extend({
model:
function(){
return[
Ember.Object.create({name:
"张三",sex:
"男"}),
Ember.Object.create({name:
"李四",sex:
"女"}),
Ember.Object.create({name:
"王麻子",sex:
"男"})
];
}
});
实现了路由的model方法,路由的modal方法作用是:
通过模型像服务端请求数据。
我们先跳过模型的介绍,以及与服务端的交互,直接返回一个数组。
框架会自动创建users的控制器,并讲返回的数组赋值给控制器。
我们在模版中就可以直接使用了。
现在看看结果。
现在我们添加一个按钮用来跳转到新建用户页面。
修改users模版
{{u.name}} | {{u.sex}} |
{{outlet}}
模版中用到{{action"gotoAddUser"}}来给按钮添加点击事件。
默认是会调用控制器的gotoAddUser方法。
我们加上控制器代码。
按照命名规则,users路由对应的控制器是UserMgr.UsersController。
UserMgr.UsersController=Ember.ArrayController.extend({
gotoAddUser:
function(){
this.target.transitionTo("users.new");
}
});
gotoAddUser方法通过this.target访问到路由器,然后调用路由器的transitionTo方法实现了跳转到user.new路由。
刷新页面,点击添加按钮就可以看到效果。
1.3.服务端交互
现在我们加上与服务器交互的部分。
这里开始,我们需要把我们的页面放到web服务器上运行啦。
服务器上的服务我会用静态的文本文件代替。
首先,定义一个模型,下面的User模型描述了User对象的属性name和sex。
UserMgr.User=DS.Model.extend({
name:
DS.attr('string'),
sex:
DS.attr('string')
});
定义一个store
UserMgr.Store=DS.Store.extend({
revision:
11
});
然后修改users路由中获取数据的方式
UserMgr.UsersRoute=Ember.Route.extend({
model:
function(){
returnUserMgr.User.find();
}
});
刷新页面,我们会发现,应用向http:
//localhost/users这个地址发起了请求。
因为我的demo没有放在根路径,所以我们配置一下连接器。
UserMgr.Store=DS.Store.extend({
revision:
11,
adapter:
'UserMgr.RESTAdapter'
});
UserMgr.RESTAdapter=DS.RESTAdapter.extend({
namespace:
"jsframe/ember-sample1/apps/demo/data"
});
使用store的adapter属性指定一个连接器,该连接器继承自RESTAdapter,设置namespace。
这表示,生成的请求链接是域名+namespace+模型的小写复数形式。
demo访问地址是http:
//localhost/jsframe/ember-sample1/apps/demo/,用户列表数据访问地址是http:
//localhost/jsframe/ember-sample1/apps/demo/data/users/。
用户列表数据为一个json文件,按照命名规则,返回的数组需要用users(模型的小写复数形式)包裹,内容如下
{
"users":
[
{
"id":
"1",
"name":
"张三",
"sex":
"男"
},
{
"id":
"2",
"name":
"李四",
"sex":
"男"
},
{
"id":
"3",
"name":
"王麻子",
"sex":
"女"
},
{
"id":
"4",
"name":
"小飞飞",
"sex":
"女"
}
]
}
刷新页面,就可以看到结果
例子到这里就结束了。
大家可以根据后面的内容,尝试改动例子来深入的理解。
第二章概念
2.1核心概念
Ember中有几个核心概念,应用、路由器、模版、视图、控制器、模型
路由器
路由
路由
路由
模版
视图
控制器
模型
模版
视图
控制器
模型
模版
视图
控制器
模型
界面模块
界面模块
界面模块
应用
应用包含一个路由器、和N个界面模块。
路由器包含N个路由。
界面模块是一个虚拟的概念,表示界面上的一小块,每个界面模块由一个模版,一个控制器,一个模型组成。
界面模块间模型是可以公用的,模版、控制器理论上可以公用,一般不会公用。
模版与视图是相互作用的,模版中可以直接调用视图,视图也可以包含一个模版,它们一起组成了界面。
应用
应用是一个全局的命名空间对象。
你应用程序中所有的类,对象都应该定义为应用的成员。
应用还会负责为视图代理事件到ducument;自动渲染应用模版;自动创建路由器。
2.1.1路由器
路由器是一个负责管理应用状态的对象。
每个应用状态就由一个路由表示。
路由器管理了一组路由,路由负责将URL与模版、模型、控制器关联起来。
当你的用户启动应用程序时,路由器将根据URL调用相应的路由,显示相应的模板,并为模板配对相应的模型对象。
2.1.2模型
模型是一个存储持久化数据的对象。
这些数据会被你的应用操作的,还会展示值给用户。
这些数据通常是从服务器获取,当数据改变时,还会保存到服务器。
通常,使用EmberData将加载的数据转化成具有关系,计算属性的模型实例。
2.1.3模版
模版是用来描述你的应用的用户界面的,它是用Handlebars模版语言来写的。
除了普通的HTML,模版还包含以下内容:
•表达式,从控制器和模型中获取数据,并将数据替换成html内容。
当数据改变时,会自动更新html内容。
例如:
{{firstName}}。
•插座(Outlet),模版的占位符。
当用户访问你的应用的时候,路由器会根据url将不同的模版插入到插座(outlet)中展示出来。
在模版中使用{{outlet}}标签来添加一个插座(outlet)。
•视图(View),负责处理用户事件。
在模版中使用{{view}}标签来添加一个视图。
2.1.4控制器
控制器是一个存储应用临时数据的对象。
模版会连接控制器,并将当前存储的数据转换成HTML。
控制器通常作为模型的代理,为模版提供数据。
这种情况下,控制器传递模型的属性给模版,可以通过改变模型来改变展现结果。
2.1.5视图
视图负责将原生事件转换成你的应用中的语义事件,并将事件发送到控制器。
视图需要包含一个模版,也可以被嵌入模版中。
例如,一个视图可能转换一个click事件成有意义的deleteItem事件,然后发送到控制器中。
如果控制器没有实现deleteItem事件,则会发送到当前的路由中。
2.2命名约定
框架没有使用写很多引用的方式来关联对象,而是通过命名约定,来关联路由器、控制器、模版。
2.2.1.应用
当你的应用启动的时候,Ember会查找这些:
·App.ApplicationRoute
·App.ApplicationController
·application模版
框架会渲染application模版为主模版。
如果你定义了App.ApplicationController,框架会创建一个App.ApplicationController的实例,并将这个实例设置为template的控制器。
也就是说,模版中的需要的数据会从这个控制器实例的属性中获取。
如果你的应用定义了App.ApplicationRoute,在application模版渲染前,框架会先调用路由的钩子方法(model,setupController,renderTemplate)。
这里是一个使用路由,控制器,模版的简单例子:
1
2
3
4
5
6
7
8
9
10
App.ApplicationRoute=Ember.Route.extend({
setupController:
function(controller){
//`controller`istheinstanceofApplicationController
controller.set('title',"Helloworld!
");
}
});
App.ApplicationController=Ember.Controller.extend({
appName:
'MyFirstExample'
});
1
2
3
4
--applicationtemplate-->
{{appName}}
{{title}}
在框架的应用中,你只需要指定控制器类,框架会实例化他们,并将他们提供给模版。
2.2.2.简单路由
每个路由都有一个以路由名字命名的路由、控制器、模版。
让我们从一个简单的路由器开始:
1
2
3
App.Router.map(function(){
this.route('favorites');
});
如果你导航到/favorites,框架会查找这些:
·App.FavoritesRoute
·App.FavoritesController
·favorites模版
框架会渲染favorites模版到application模版中的{{outlet}},还会创建一个App.FavoritesController实例,并且设置为模版的控制器。
如果你的应用定义了App.FavoritesRoute,框架会在模版渲染前,自动调用它。
这跟上面应用中的步骤是一样的。
对于App.FavoritesRoute,你可能需要实现model钩子方法去指定你的控制器将要传递给模版的模型实例。
例如:
1
2
3
4
5
6
App.FavoritesRoute=Ember.Route.extend({
model:
function(){
//themodelisanArrayofalloftheposts
returnApp.Post.find();
}
});
在这个例子里,我们没有定义FavoritesController。
因为这里的model方法返回了数组,框架会自动提供一个Ember.ArrayController的实例,该实例会将返回的数组作为它的model属性。
相比于直接使用模型,使用ArrayController有两点主要好处:
·任何时候,当你替换了一个控制器的模型,你不需要通知视图。
·控制器可以提供额外的计算属性,或者保存不属于模型层的视图的临时状态。
这样使得视图、控制器、模型完全分离。
模版可以遍历控制器中的一个元素:
1
2
3
4
5
- {{title}}
{{#eachcontroller}}
{{/each}}
2.2.3.动态参数
如果一个路由使用了动态参数,这个路由的model将基于这个参数的值。
考虑这个路由器定义:
1
2
3
App.Router.map(function(){
this.resource('post',{path:
'/posts/:
post_id'});
});
在这种情况下,这个路由的名字是post,框架会查找这些:
·App.PostRoute
·App.PostController
·post模版
你的路由的model方法传递参数:
post_id到模型里。
serialize方法转换模型对象到URL参数中。
(例如:
计算一个模型的链接的时候).
1
2
3
4
5
6
7
8
9
App.PostRoute=Ember.Route.extend({
model:
function(params){
returnApp.Post.find(params.post_id);
},
serialize:
function(post){
return{post_id:
post.get('id')};
}
});
因为这种模式很常见,所以路由提供了默认的处理。
·如果你的动态参数以"_id"结束,model方法会转换参数po
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Ember js 用户手册