英文原址:http://emberjs.com/guides/concepts/naming-conventions/
Ember.js使用命名约定来连接你的各种对象,从而避免使用过多的引用。你需要对你的route,controller和template使用这些约定。通常你可以推测哪些名字,但是这个指导集中地给出了一个大纲,包含了所有的命名约定。在下面的列子中,“App”是我们选定的命名空间,或者说它代表了你创建的Ember应用,但是你也可以为你的应用选择任何其他的名字。我们后面将会向你展示如何创建一个Ember应用,现在让我们先专心学习这些命名约定。
The Application(应用)
- App.ApplicationRoute
- App.ApplicationController
- "application" template
App.ApplicationRoute = Ember.Route.extend({
setupController: function(controller) {
// `controller` is the instance of ApplicationController
controller.set('title', "Hello world!");
}
});
App.ApplicationController = Ember.Controller.extend({
appName: 'My First Example'
});
<!-- application template -->
<h1>{{appName}}</h1>
<h2>{{title}}</h2>
在Ember应用中,你必须总是将你的controller指定成类,框架负责初始化它们,并且提供给你的模板。这使得测试你的controll变得非常简单,并且保证你的整个应用对于每种controller只共享一个对应controller的实例。
Simple Route(简单路由)
App.Router.map(function() {
this.route('favorites');
});
如果你的用户导航到“/favorites”,Ember会查找下面的对象:
- App.FavoritesRoute
- App.FavoritesController
- the favorites template
App.FavoritesRoute = Ember.Route.extend({
model: function() {
// the model is an Array of all of the posts
return this.store.find('post');
}
});
<ul>
{{#each controller}}
<li>{{title}}</li>
{{/each}}
</ul>
Dynamic Segments(动态字段)
App.Router.map(function() {
this.resource('post', { path: '/posts/:post_id' });
});
在这个例子中route的名字是post,因此Ember会查找下面的对象:
- App.PostRoute
- App.PostController
- the post template
你的route的model钩子函数会将:post_id参数转换成一个model,route的serialize钩子函数会将一个model数据转换回一个URL中的参数(比方说,当生成一个指向model对象的链接)。
App.PostRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('post', params.post_id);
},
serialize: function(post) {
return { post_id: post.get('id') };
}
});
因为这个用法是如此的通用,它被设计成了route的默认行为。
如果你的dynamic segment以_id结尾,那默认的model钩子函数会将名字的前面部分解释为定义在Application命名空间下的model的类名(post变成App.Post),然后Ember会在这个类上调用find方法,将_id部分对应的实际值作为参数传入以查找含有该id的对应实例。而默认的serialize钩子函数会将model对象的id属性返回回来以插入URL。
Route, Controller and Template defaults(路由,控制器和模板的默认行为)
如果你没有定义post route定义一个路由处理类(App.PostRoute),Ember仍然会创建一个App.PostController的实例,然后用它来显示post模板。如果你没有定义一个对应的controller(App.PostController),Ember仍然会基于route的model钩子函数的返回值,给你自动创建一个。如果model钩子函数的返回值是Array,你会得到一个ArrayController,否则你会得到一个ObjectController。
如果你没有定义一个对应的模板(post template),Ember不会显示任何东西
Nesting(嵌套)
App.Router.map(function() {
this.resource('posts', function() { // the `posts` route
this.route('favorites'); // the `posts.favorites` route
this.resource('post'); // the `post` route
});
});
resource是一个route,controller以及template名字的开始,即使post resource是嵌套的,它的route名字仍然是App.PostRoute,它的controller名字是App.PostController,而它的模板名字是post。当你将一个route嵌套进resource里,route的名字会被添加在resource名字的后面,以一个“.”来连接。
Route Name | Controller | Route | Template |
---|---|---|---|
posts | PostsController | PostsRoute | posts |
posts.favorites | PostsFavoritesController | PostsFavoritesRoute | posts/favorites |
post | PostController | PostRoute | post |
The Index Route (Index路由)
App.Router.map(function() {
this.route('favorites');
});
它等同于:
App.Router.map(function() {
this.route('index', { path: '/' });
this.route('favorites');
});
如果用户访问"/", Ember会查找如下对象:
- App.IndexRoute
- App.IndexController
- the index template
App.Router.map(function() {
this.resource('posts', function() {
this.route('favorites');
});
});
等同于:
App.Router.map(function() {
this.route('index', { path: '/' });
this.resource('posts', function() {
this.route('index', { path: '/' });
this.route('favorites');
});
});
如果用户浏览到"/posts",当前的route会是posts.index,Ember会找如下的对象:
- App.PostsIndexRoute
- App.PostsIndexController
- The posts/index template