- 浏览: 438924 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
ubuntu的疯狂:
推荐一份完整的教程:http://blog.ddlisting ...
Emberjs学习 -
ptz19:
请问,如果把合并前的文件,不要dest 目标目录来。如: js ...
gulp下静态资源的合并、压缩、MD5后缀 -
zhouzq1008:
楼主,还有个问题,<a href="" ...
gulp下静态资源的合并、压缩、MD5后缀 -
zhouzq1008:
感谢楼主,用到了您的代码, 但现在好像有改动 否则会报错:修改 ...
gulp下静态资源的合并、压缩、MD5后缀 -
denverj:
感谢分享~
Emberjs学习
断断续续看了3周,还是一头雾水,文档不是很友好,这个框架,太多潜规则,学习曲线太大了。
简单记录一些学习笔记。
1. Ember适用于单页面网站的构建。依赖 jQuery 和 Handlebars 2个库。
2. 基于路由的控制有2种方式:带hash的url和支持history API的url。
前者要求IE8+,后者要求IE10+。有关浏览器支持部分,请参阅:http://caniuse.com/#search=history,http://caniuse.com/#search=hashchange
或许是因为浏览器兼容问题——广度和成熟度,Ember默认使用带hash的url路由控制。
3. Ember使用了ES5的对于Object的属性访问控制,从而要求IE9+.有关浏览器支持情况,请参阅:http://kangax.github.io/compat-table/es5/#Object.defineProperty
4. Ember是面向对象的,有类、实例、继承的概念。对于属性的读写,会触发相应的change事件,从而通知到观察者,做出相应的动作。
例如:
4.1 通常在类定义的时候,就已经确定好属性和方法了。如果要修改意见定义的类,则需要使用 reopen (类函数)/reopenClass(静态函数)。
5. Ember是基于MVC来设计的,M/V/C都有相应基础的类,还有一个Route,它控制了页面的流转,可以说是程序各个模块的入口。
而我们要做的,继承这些基础的类,编写相应模块的M/V/C/R.
一个route 的典型工作,有如下面代码所示:
Ember对MVC/R都遵循着同一套的命名规则,并且在用户没有显示定义的时候,它会在后台为用户生成。例如:
一个Ember应用程序Application,默认就会有一个 ApplicationController/ApplicationRoute/application/ApplicationView,route为 /
例如,我们有下面的路由定义:
最终得到的MVC对象将会有:
5.1 路由定义: route VS resource
相同:两者都可以定义路由;
不同:resource更像是一个盒子,里面可以内嵌route,通常用于划分模块;resource用于区分模块,还可以缩短它里面route的MVC命名,
不必从根路径开始,而是以当前resource做起点即可。譬如,在上面route定义中:
UserEditRoute instead of UsersUserEditRoute;
UserEditControler instead of UsersUserEditController;
UserEditView instead of UsersUserEditView;
for templates, user/edit instead of users/user/edit.
route则已经是最小的路由定义了,一般是指向模块内一个分支/动作。
5.2 如果定义resource时候,没有同时提供函数,则路径 resource.index 对应的route 不会被创建。
如此一来,/resource的访问,将直接使用 ResourceRoute, ResourceController, and resource template.
5.3 路由跳转 transitionTo VS transitionToRoute
// from a route
this.transitionTo('your.route');
// from a controller
this.transitionToRoute('your.route');
6. Controller 扮演 View与Route之间的桥梁,用它封装Model,并定义了一系列和服务器通讯的功能。
6.1 Controller 在Ember中都是单例模式,访问同一路径,不会创建新的实例。
6.2 ArrayController VS ObjectController VS Controller
ArrayController 继承自 Ember.ArrayProxy,适用于model为数组对象,从而可以内置并利用数组的排序等功能;
ObjectController 继承自 Ember.ObjectProxy,适用于model为单个对象情况。
Controller 继承自 Ember.Object。
显然,如果直接Controller它创建的实例,view获得的数据,只能从该controller获取,无法向上寻找到route。
而ArrayController、ObjectController都继承自Proxy,有了“代理”功能,可以向上寻找route,从中获取model。
示例:
7. Ember 通常的事件流转顺序是:
a. template element(e.g: click);
b. 查找对应Controller的action定义,如果不存在,则c;
c. 查找对应Routed的action定义,如果不存在,则d;
d. 查找上一级的Route中的action定义,如果不存在,则重复 d,直到AppcationRoute截止。
8. Component:
8.1 和view有些相像,事实上,它正式View的一个子类。它通过预定义的接口与其它component/View通信。
8.2 每一个Component的模板命名都需要以 "components/" 开头。例如:
<script type="text/x-handlebars" id="components/blog-post">
<h1>Blog Post</h1>
<p>Lorem ipsum dolor sit amet.</p>
</script>
Component Name Component Class
blog-post App.BlogPostComponent
audio-player-controls App.AudioPlayerControlsComponent
8.3 两种定义方法:
a. 把事件绑在事件函数的上面
upload: function(){
...
}.on('click')
b. 用key-value的形式:
click: function(){
//do updoad
}
8.4 component 如何与application的其它功能做交互?
可以通过定义事件,然后利用ember的事件发送,实现参数的传递、交互。
注意:Component仅能向父级发送事件。
如果 ComponentA 里面嵌套了 ComponentB,那么ComponentB 中sendAction只能到达 ComponentA,
如果需要把该事件冒泡到 Controller 那一层,你需要在 ComponentA 里面接收该事件,并做接力,向上发送。
简单记录一些学习笔记。
1. Ember适用于单页面网站的构建。依赖 jQuery 和 Handlebars 2个库。
2. 基于路由的控制有2种方式:带hash的url和支持history API的url。
前者要求IE8+,后者要求IE10+。有关浏览器支持部分,请参阅:http://caniuse.com/#search=history,http://caniuse.com/#search=hashchange
或许是因为浏览器兼容问题——广度和成熟度,Ember默认使用带hash的url路由控制。
3. Ember使用了ES5的对于Object的属性访问控制,从而要求IE9+.有关浏览器支持情况,请参阅:http://kangax.github.io/compat-table/es5/#Object.defineProperty
4. Ember是面向对象的,有类、实例、继承的概念。对于属性的读写,会触发相应的change事件,从而通知到观察者,做出相应的动作。
例如:
//定义一个类: var Point = Ember.Object.extend({ x: null, y: null, z: null, logX: function(){ console.log(this.get('x')); }, logY: function(){ console.log(this.get('y')); }, logZ: function(){ console.log(this.get('z')); } }); //创建一个对象 var point = Point.create({ x: 3, y: 5, z: 7 }); point.logX();// 3 //对象继承 var Vector = Point.extend({ add: function(vector){ var x = this.get('x') + vector.get('x'); var y = this.get('y') + vector.get('y'); var z = this.get('z') + vector.get('z'); this.set('x', x); this.set('y', y); this.set('z', z); } }); //实例A var vectorA = Vector.create({ x: 3, y: 5, z: 7 }); //实例B var vectorB = Vector.create({ x: 1, y: 2, z: 3 }); //应用新方法 vectorA.add(vectorB); vectorA.logX(); //4
4.1 通常在类定义的时候,就已经确定好属性和方法了。如果要修改意见定义的类,则需要使用 reopen (类函数)/reopenClass(静态函数)。
var Book = Em.Object.extend(); Book.reopen({ id: null, title: null, purchase: function(){ console.log('sold'); } }); //类的静态方法 Book.reopenClass({ getById: function(id){ return Book.create({ id: '456', title: 'Harry Potter' }); } }); Book.create({ id: 456, title: 'Harry Potter' }); var book = Book.getById(456); book.purchase();
5. Ember是基于MVC来设计的,M/V/C都有相应基础的类,还有一个Route,它控制了页面的流转,可以说是程序各个模块的入口。
而我们要做的,继承这些基础的类,编写相应模块的M/V/C/R.
一个route 的典型工作,有如下面代码所示:
App.PostRoute = Ember.Route.extend({ //1. 根据url参数,获取model数据 model: function(params){ return Ember.$.getJSON('/posts/'+params.post_id); }, //2. 把model 赋值给对应 controller 的 model属性。这个函数是默认的。 setupController: function(controller, model){ // [3]. 可以在这里自定义 controller.set('model', model); } });
Ember对MVC/R都遵循着同一套的命名规则,并且在用户没有显示定义的时候,它会在后台为用户生成。例如:
一个Ember应用程序Application,默认就会有一个 ApplicationController/ApplicationRoute/application/ApplicationView,route为 /
例如,我们有下面的路由定义:
App.Router.map(function(){ this.resource('users', function(){ this.resource('user', { path:'/:user_id' }, function(){ this.route('edit'); }); this.route('create'); }); this.route('about'); }
最终得到的MVC对象将会有:
URL | Route Name | Controller | Route | Template |
N/A | N/A | ApplicationController | ApplicationRoute | application |
/ | index | IndexController | IndexRoute | index |
N/A | users | UsersController | UsersRoute | users |
/users | users.index | UsersIndexController | UsersIndexRoute | users/index |
N/A | user | UserController | UserRoute | user |
/users/:user_id | user.index | UserIndexController | UserIndexRoute | user/index |
/users/:user_id/edit | user.edit | UserEditController | UserEditRoute | user/edit |
/users/create | users.create | UsersCreateController | UsersCreateRoute | users/create |
5.1 路由定义: route VS resource
相同:两者都可以定义路由;
不同:resource更像是一个盒子,里面可以内嵌route,通常用于划分模块;resource用于区分模块,还可以缩短它里面route的MVC命名,
不必从根路径开始,而是以当前resource做起点即可。譬如,在上面route定义中:
UserEditRoute instead of UsersUserEditRoute;
UserEditControler instead of UsersUserEditController;
UserEditView instead of UsersUserEditView;
for templates, user/edit instead of users/user/edit.
route则已经是最小的路由定义了,一般是指向模块内一个分支/动作。
5.2 如果定义resource时候,没有同时提供函数,则路径 resource.index 对应的route 不会被创建。
如此一来,/resource的访问,将直接使用 ResourceRoute, ResourceController, and resource template.
5.3 路由跳转 transitionTo VS transitionToRoute
// from a route
this.transitionTo('your.route');
// from a controller
this.transitionToRoute('your.route');
6. Controller 扮演 View与Route之间的桥梁,用它封装Model,并定义了一系列和服务器通讯的功能。
6.1 Controller 在Ember中都是单例模式,访问同一路径,不会创建新的实例。
6.2 ArrayController VS ObjectController VS Controller
ArrayController 继承自 Ember.ArrayProxy,适用于model为数组对象,从而可以内置并利用数组的排序等功能;
ObjectController 继承自 Ember.ObjectProxy,适用于model为单个对象情况。
Controller 继承自 Ember.Object。
显然,如果直接Controller它创建的实例,view获得的数据,只能从该controller获取,无法向上寻找到route。
而ArrayController、ObjectController都继承自Proxy,有了“代理”功能,可以向上寻找route,从中获取model。
示例:
App = Ember.Application.create({LOG_ACTIVE_GENERATION:true}); App.IndexRoute = Ember.Route.extend({ model: function(){ var author = Ember.Object.create({name: 'Cory'}); return author; } //setupController默认就是把 controller与route 的model进行关联。 ,setupController: function(controller, model){ // oops, forgot to do // controller.set('model', model); controller.set('isFancy', true); } }); App.IndexController = Ember.ObjectController.extend({ //允许向上访问route的属性。 //App.IndexController = Ember.Controller.extend({ //只有这里定义的属性,能够被view访问到。 isFancy: false, greeting: function(){ if (this.get('isFancy')) { return 'Salutations'; } else { return 'Hello'; } }.property('isFancy') }); Ember.TEMPLATES.index = Ember.Handlebars.compile( "{{greeting}}, {{name}}<br>Is Fancy? {{input type='checkbox' checked=isFancy}}"); 不同点二: var post = App.Post.create({ title: 'JavaScript prototypes.', body: 'This post will discuss JavaScript prototypes.' }); // ObjectController 内置对属性的访问 var postController = Ember.ObjectController.create(); postController.set('model', post); postController.get('title'); // JavaScript prototypes. //用户需要手动指定属性 var postController = Ember.Controller.create(); postController.set('model', post); postController.get('title'); // undefined postController.get('model.title'); // JavaScript prototypes. var controller = Ember.ArrayController.create({ model: [1, 2, 3] }); // 默认就是model的length属性 controller.get('length'); // 3 //Array相关的方法,也都可以直接调用 controller.contains(1); //true //更多方法: addObject() / addObjects() / every(callback) / filter(object) / ...
7. Ember 通常的事件流转顺序是:
a. template element(e.g: click);
b. 查找对应Controller的action定义,如果不存在,则c;
c. 查找对应Routed的action定义,如果不存在,则d;
d. 查找上一级的Route中的action定义,如果不存在,则重复 d,直到AppcationRoute截止。
8. Component:
8.1 和view有些相像,事实上,它正式View的一个子类。它通过预定义的接口与其它component/View通信。
8.2 每一个Component的模板命名都需要以 "components/" 开头。例如:
<script type="text/x-handlebars" id="components/blog-post">
<h1>Blog Post</h1>
<p>Lorem ipsum dolor sit amet.</p>
</script>
Component Name Component Class
blog-post App.BlogPostComponent
audio-player-controls App.AudioPlayerControlsComponent
8.3 两种定义方法:
a. 把事件绑在事件函数的上面
upload: function(){
...
}.on('click')
b. 用key-value的形式:
click: function(){
//do updoad
}
8.4 component 如何与application的其它功能做交互?
可以通过定义事件,然后利用ember的事件发送,实现参数的传递、交互。
示例: //1. 定义一个添加到购物车的按钮控件 App.CheckoutButtonComponent = Ember.Component.extend({ tagName: 'button', template: Ember.Handlebars.compile('add to cart'), click: function(){ //发送事件及其参数 this.sendAction('action', this.get('product')); } }); {{! 2. 购物车模板}} <ul> {{#each products}} <li> {{name}} {{price}} {{checkout-button product=this action='addToCart'}} {{! 把数据传递给component }} </li> </ul> //3. 购物的controller,定义事件 App.CartController = Ember.ArrayController.extend({ actions: { addToCart: function(product){ this.pushObjects(product); } } });
注意:Component仅能向父级发送事件。
如果 ComponentA 里面嵌套了 ComponentB,那么ComponentB 中sendAction只能到达 ComponentA,
如果需要把该事件冒泡到 Controller 那一层,你需要在 ComponentA 里面接收该事件,并做接力,向上发送。
发表评论
-
webpack简单打包PC网站前端资源
2016-02-23 14:30 1624:arrow: 1. 纯前端的打包输出,比较有局限 2 ... -
grunt构建基于seajs的网站实现
2015-06-16 16:49 1089Gruntfile.js module.exports ... -
js平滑滚动回到顶部
2015-06-10 11:42 3949优先使用 requestAnimationFrame实现。 实 ... -
fis-amd 的使用与修改
2015-05-26 16:14 3908https://github.com/fex-team/fis ... -
scrollMagic 视差与滚动动画GSAP
2015-05-19 18:14 4248scrollMagic(https://github.com/ ... -
skrollr-视差滚动动画插件
2015-05-19 14:18 1696skrollr ( https://github.com/Pr ... -
stellar插件的使用
2015-05-18 17:30 1671<!DOCTYPE html> < ... -
icon font VS svg font
2015-05-14 15:21 1156关于字体图标和SVG图标,CSS TRICK网站有较好的说明。 ... -
gulp下静态资源的合并、压缩、MD5后缀
2015-05-05 15:48 22528var gulp = require('gulp'); ... -
DOMContentLoaded VS onload VS onreadystatechange
2015-04-30 14:50 69361. DOMContentLoaded 在页面html、scr ... -
简单的css3全屏滚动
2015-04-27 16:41 1399<!DOCTYPE html> <ht ... -
jquery插件treetable 的使用
2015-04-20 16:12 11836插件的文档写得不是很好,为了能弄出异步加载的功能,小折腾了一番 ... -
sublime 侧边栏字体大小修改
2015-04-16 10:46 3778【转载自:http://jekhy.com ... -
移动端的“点透”问题
2015-04-15 14:13 1604移动端的“点透”问题,这篇博文有较好的说明: http://w ... -
scheme缺少,ie的bug
2015-04-01 17:34 499在页面上定位一个资源(JS/CSS/image),通常的url ... -
大整数相加
2015-03-26 22:18 878function repeatStr(ch, n){ ... -
getBoundingClientRect 跨浏览器实现
2015-03-18 18:30 1059<head> <script ... -
window.name 跨域
2015-03-18 17:29 845window.name跨域的基础是:iframe页面在其url ... -
window.name 跨域
2015-03-18 17:27 1window.name跨域的基础是:iframe页面在其ur ... -
HTML History API
2015-03-13 18:05 1081// 替换当前浏览器history的最后一项记录。 hi ...
相关推荐
拉威 本自述文件概述了与此Ember应用程序进行协作的细节。 此应用程序的简短介绍可以轻松地转到此处。 先决条件 您需要在计算机上正确安装以下物品。 (带有NPM) 安装 git clone 此存储库 切换到新目录 ...
emberjs中的重要部分,页面的渲染,希望对大家学习emberjs有帮助,emberjs是一款强大的js mvc框架
Emberjs学习 本自述文件概述了与此Ember应用程序进行协作的细节。 此应用程序的简短介绍可以轻松地转到此处。 先决条件 您需要在计算机上正确安装以下物品。 (带有NPM) 安装 git clone 此存储库 切换到新目录 npm...
emberjs-入门 通过本指南学习 EmberJS: ://emberjs.com/guides/getting-started/
学习认证 使用EmberJS和Golang学习基于令牌的身份验证
纯英文文档,供给感兴趣的学习,分享
仲裁公关 用于计算经销商购买的汽车税的 Web 应用程序。 学习 EmberJS 仲裁公关
演示应用本自述文件概述了与此Ember应用程序进行协作的细节。 此应用程序的简短介绍可以轻松地转到此处。先决条件您需要在计算机上正确安装以下物品。 (带有NPM)安装git clone 此存储库切换到新目录npm install ...
待办事项这是我学习如何使用Ember JS的方法-此链接的教程 #######################此README概述了与此Ember应用程序进行协作的详细信息。 此应用程序的简短介绍可以轻松地转到此处。先决条件您需要在计算机上正确...
Blog2-ember 从教程创建的应用- 2015年6月24日 本自述文件概述了与此Ember应用程序进行协作的细节。 此应用程序的简短介绍可以轻松地转到此处。 先决条件 您需要在计算机上正确安装以下物品。 (带有NPM) ...
TodoMVC-Ember 学习 Ember 并遵循其网站上的 Ember.js 指南
培训-余烬 此自述文件概述了在此 Ember 应用程序上进行协作的详细信息。 这个应用程序的简短介绍可以很容易地转到这里。 先决条件 您将需要在您的计算机上正确安装以下东西。 (带有 NPM) 安装 ...
这样,可能对使用惊人的创建类似网站感兴趣的其他人可以自己学习和学习如何做。 我并不是说我创建了“理想的” Ember.js应用程序。 确实,尽管我已经获得了丰富的经验,但是再次使用它对我来说是我想分享的又一次...
读带有葡萄牙语帖子/截屏视频的材料,用于学习 EmberJS 该材料由维护。帖子安德森·德·卡斯特罗小马尔西奥莱安德罗·塞斯基尼截屏视频法比奥·维多维利贡献你知道有哪些不在列表中的关于 EmberJS 的很酷的内容吗? ...
#EmberJs Demo(EmberJs演示项目)本项目出于学习目的而创建,参照于(This project created only for learning,refers to)##工具(Tools depends on)要使用本项目需要使用nodeJs/npm/grunt###nodeJs/npm从nodejs官网...
简单的应用程序,用于学习Ember.js并使用Fieldbook API 中篇文章: : 请参阅LiveCoding.TV上的流媒体系列: ://www.livecoding.tv/video/benoror/playlists/emberjs/ 进一步阅读/有用链接 开发浏览器扩展
分析、谷歌地图、Joomla、Magento、Apex、Emberjs、BackboneJS、KnockoutJS、Node.js 等教程! :FREE_button: 学习为非营利组织编码和构建项目。 您将学习的技能:HTML5、CSS3、Javascript、数据库、Git、Node.js、...
手册:学习团队的笔记手册
这是一个静态DJ网站,用于学习emberjs的工作方式。 非常基本的东西。 先决条件 您需要在计算机上正确安装以下物品。 (带有NPM) 安装 git clone 此存储库 切换到新目录 npm install bower install 运行/开发 ...
新发布的工具:帮助学习团队发布Ember.js的内部工具