1.2 Getting Started--Naming Conventions(命名约定)
- app/routes/application.js
export default Ember.Route.extend({
model() {
return { title: "Hello World" };
}
});
- app/controllers/application.js
export default Ember.Controller.extend({
appName: 'My First Example'
});
- app/templates/application/hbs
<h1>{{appName}}</h1>
<h2>{{model.title}}</h2>
5. 在Ember.js应用程序中,你总会提供你的对象作为类,框架负责实例化它们并通过运行时解析器把它们提供给templates。
二、Simplement Routes(简单路由)
1. 每一个route都会有一个和它名字相同的controller和template。
2. A simple router:
var Router = Ember.Router.extend(); Router.map(function () {
this.route('favorites');
}); export default Router;
- 如果你的用户导航到/favorites,Ember.js将会在你的项目中需找下面这些类:
- app/routes/favorites.js
- app/controllers/favorites.js
- app/templates/favorites.js
- Ember.js将会把favorites template加载到application template的{{outlet}}中。它将会设置一个controller:favorites的实例作为template的controller。
- 如果你的app提供了一个route:favorites,这个框架会在加载template之前调用它。
3. 对于一个类似route:favorites这样的路由,你可能会实现model hook去指定你的controller将会把哪个model展现到模板。
example:
import ajax from 'ic-ajax'; export default Ember.Route.extend({
model() {
//the model is an Array of all of the posts
//fetched from this url
reutrn ajax('/a/service/url/where/posts/live');
}
});
- 在这个例子中,我们没有提供一个controller:favorites。因为model是一个数组,Ember.js会自动提供一个Ember.ArrayController的实例,它会展现backing Array作为它的模型。
- 你可以把Ember.ArrayController看做犹如模型本身。这么做的好处就是,你可以随时更换controller的model,而无需直接通知模板和组件的变化。
4. template可以遍历控制器的元素:
<ul>
{{#each controller as |item|}}
<li>{{item.title}}</li>
{{/each}}
</ul>
三、动态段(a URL that includes a parameter)
如果route使用动态段(一个包含参数的URL),路由的model将会基于用户提供的动态段的值。
1. 考虑一下这个路由定义
app/router.js
var Router = Ember.Router.extend(); Router.map(function () {
this.route('post', { path: '/posts/:post_id' });
}); export default Router
- 在这个例子中,route的名字是post,所以Ember.js将会查找这些对象:
- app/routes/post.js
- app/controllers/post.js
- app/templates/post.hbs
2. 路由的处理程序的model hook会把动态参数:post_id转换进model中。serialize hook把一个模型对象转换回这个路由的URL参数(例如,为模型对象生成一个link)。
app/routes/post.js
import ajax from 'ic-ajax' export default Ember.Route.extend({
model(params) {
return ajax('/my-service/posts/' + params.post_id);
},
serialize(post) {
return { post_id: Ember.get(post, 'id') };
}
});
3. 因为这种现象非常普遍,它是默认的路由处理程序。
- 如果动态字段以_id结尾,默认的model hook将把第一部分转换为应用程序命名空间中的一个模型类(post looks for app/models/post.js)。然后它会调用类中的find获得动态字段的值。
- serialize hook的默认行为是用model object的id属性的值替换route的动态字段。
四、 Route,Controller和Template Defaults
1. 如果你没有为post route(app/routes/post.js)指定一个路由处理器,Ember.js仍然会使用app的app/controllers/post.js实例去渲染app/templates/post.hbs模板。
2. 如果你没有指定controller(app/controllers/post.js),Ember将会基于route的model hook返回的值生成一个。如果model是一个Array,你会得到一个ArrayController。或则,你会得到一个ObjectController。
3. 如果你没有指定一个post模板,Ember.js什么都不会渲染。
五、Nesting(嵌套)
你可以嵌套路由:
app/router.js
var Router = Ember.Router.extend(); Router.map(function () {
this.route('posts', function() { //the 'posts' route
this.route('favorites'); //the 'posts.favorites' route
this.route('post'); //the 'posts.post' route
});
}); export default Router
下面是这个路由器中每个route的命名约定:
六、The Index Route
在每个级别的嵌套(包括顶层),Ember.js自动为路径"/"提供一个名为index的route。
1. example:
app/router.js
var Router = Ember.Router.extend(); Router.map(function () {
this.route('favorites');
}); export default Router;
这相当于:
var Router = Ember.Router.extend(); Router.map(function () {
this.route('index', { path: '/' });
this.route('favorites');
}); export default Router;
如果用户访问'/',Ember.js将会查找这些对象:
- app/routes/index.js
- app/controllers/index.js
- app/templates/index.hbs
index模板将会渲染到application模板的{{outlet}}中。如果用户导航到/favorites,Ember.js将会使用favorites template替换index template。
2. 一个嵌套的路由器
app/router.js
var Router = Ember.Router.extend(); Router.map(function () {
this.route('posts', function () {
this.route('favorites');
});
}); export default Router;
这相当于:
app/router.js
var Router = Ember.Router.extend(); Router.map(function () {
this.route('index', { path: '/' });
this.route('posts', function () {
this.route('index', { path: '/' });
this.route('favorites');
});
}); export default Router;
如果用户导航到/posts,当前路由将会是posts.index,Ember.js将会查找以下objects:
- app/routes/posts/index.js
- app/routes/posts/index.js
- app/templates/posts/index.hbs
首先,posts模板将会被渲染到application模板的{{outlet}}中。然后,posts/index模板将会被渲染到posts模板的{{outlet}}中。
如果用户导航到posts/favorites,Ember.js将会用posts/favorites模板替换posts模板中的{{outlet}}。
1.2 Getting Started--Naming Conventions(命名约定)的更多相关文章
- Effective Java 56 Adhere to generally accepted naming conventions
Typographical naming conventions Identifier Type Type Examples Package com.google.inject, org.joda.t ...
- Naming Conventions for .NET / C# Projects
http://www.akadia.com/services/naming_conventions.html Naming Conventions for .NET / C# Projects Mar ...
- C# Coding & Naming Conventions
Reference document https://msdn.microsoft.com/en-us/library/ff926074.aspx https://msdn.microsoft.com ...
- Spring mvc 4系列教程(二)——依赖管理(Dependency Management)和命名规范(Naming Conventions)
依赖管理(Dependency Management)和命名规范(Naming Conventions) 依赖管理和依赖注入(dependency injection)是有区别的.为了将Spring的 ...
- JavaScript Patterns 2.10 Naming Conventions
1. Capitalizing Constructors var adam = new Person(); 2. Separating Words camel case - type the word ...
- Naming conventions of python
1.package name 全部小写字母,中间可以由点分隔开,作为命名空间,包名应该具有唯一性,推荐采用公司或组织域名的倒置,如com.apple.quicktime.v2 2.module nam ...
- Stackoverflow/dapper的Dapper-Extensions用法(一)
Dapper-Extensions Dapper Extensions is a small library that complements Dapper by adding basic CRUD ...
- Objective-C文章中的生词
Objective-C http://rypress.com/tutorials/objective-c/index C Basics http://rypress.com/tutorials/ ...
- ExtJS笔记2 Class System
For the first time in its history, Ext JS went through a huge refactoring from the ground up with th ...
随机推荐
- ubuntu普通用户无法使用usdo命令
1.切换到root用户下,怎么切换就不用说了吧,不会的自己百度去. 2.添加sudo文件的写权限,命令是: chmod u+w /etc/sudoers 3.编辑sudoers文件 vi /etc/s ...
- python2.0_s12_day19_前端结合后端展示客户咨询纪录
接下来就是将后台视图与前端页面结合起来了完成后台系统了.实现前端展示用户列表1.先在base.html代码中把模版中Dashboard下面的内容清空,如下: 具体删除哪些html代码,自己找吧.2.我 ...
- Android App签名打包 与 SDK开发文档
Android App签名打包签名的意义1.为了保证每个程序开发者的合法权益2.放置部分人通过使用相同的Package Name来混淆替换已经安装的程序,从而出现一些恶意篡改3.保证我们每次发布的版本 ...
- Android 内存使用hprof文件打开方法
http://blog.csdn.net/moruihong/article/details/7677128 与C++的内存不同,C++的内存泄露是由于分配了内存给某程序但是又没有回收造成的.Java ...
- executeQuery、executeUpdate 和 execute
Statement 接口提供了三种执行 SQL 语句的方法:executeQuery.executeUpdate 和 execute.使用哪一个方法由 SQL 语句所产生的内容决定. 1. Resul ...
- 【BZOJ1453】[Wc]Dface双面棋盘 线段树+并查集
[BZOJ1453][Wc]Dface双面棋盘 Description Input Output Sample Input Sample Output HINT 题解:话说看到题的第一反应其实是LCT ...
- oracle rank over partition by
转自:https://www.cnblogs.com/wingsless/archive/2012/02/04/2338292.html rank() over(partition)的使用 有的时 ...
- ThinkPHP分类查询(获取当前分类的子分类,获取父分类,下一级分类)
获取指定分类的所有子分类ID号 //获取指定分类的所有子分类ID号 function getAllChildcateIds($categoryID){ //初始化ID数组 $array[] = $ca ...
- Java多线程(4)----线程的四种状态
与人有生老病死一样,线程也同样要经历开始(等待).运行.挂起和停止四种不同的状态.这四种状态都可以通过Thread类中的方法进行控制.下面给出了Thread类中和这四种状态相关的方法. 1 // 开始 ...
- Web安全开发建议
版权声明:原创作品,如需转载,请与作者联系.否则将追究法律责任. Web安全问题,很多时候会被人所忽略,安全漏洞造成了很多不必要的维护和开发任务,产生的问题有时候更是致命的. 实际上,只要我们养成一些 ...