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 ...
随机推荐
- Scala 读文件
环境: Cent OS 6.3 以下说明怎样读取一个文件. 代码: $ cat fileRead.scala import scala.io.Source if (args.length > 0 ...
- mybatis由浅入深day01_4入门程序_4.6根据用户id(主键)查询用户信息
4 入门程序 4.1 需求 根据用户id(主键)查询用户信息 根据用户名称模糊查询用户信息 添加用户 删除 用户 更新用户 4.2 环境 java环境:jdk1.7.0_72 eclipse:indi ...
- 13年10月 月赛第一场 set 4 迷宫问题
题目 给定一个n*m的迷宫,如S....#E.E其中,S代表开始位置,#代表不可行走的墙,E代表出口.主人公从开始位置出发,每次等概率的随机选择下一个可以行走的位置(可能会发生回溯),直到到达某一个出 ...
- Android中文API
Android中文API http://www.android-doc.com/index.html
- apache 图片防盗链
RewriteEngine on RewriteCond %{HTTP_REFERER} !ot.com [NC] RewriteCond %{HTTP_REFERER} !baidu.com [NC ...
- php学习三:函数
1. php中的函数和js中的区别 在php中,函数的形参可以给一个默认值,若有实参的传递则函数使用传递过来的参数,没有的话显示默认值 代码如下: function showSelf($name=& ...
- Runtime应用(三)实现NSCoding的自动归档和自动解档
当我们需要将一个对象进行归档时,都要让该对象的类遵守NSCoding协议,再实现归档和接档方法.例如有一个Person类,该类有两个成员变量 @property (nonatomic,copy) NS ...
- POJ2286 The Rotation Game[IDA*迭代加深搜索]
The Rotation Game Time Limit: 15000MS Memory Limit: 150000K Total Submissions: 6325 Accepted: 21 ...
- Codeforces 603E Pastoral Oddities
传送门:http://codeforces.com/problemset/problem/603/E [题目大意] 给出$n$个点,$m$个操作,每个操作加入一条$(u, v)$长度为$l$的边. 对 ...
- SMGP关键代码
从网上下载java的API就可以开发了我们需要修改的类是: import java.io.IOException; import cn.com.zjtelecom.smgp.Client; impor ...