Ember.js 指引--命名约定

官方文档地址: http://emberjs.com/guides/concepts/naming-conventions/

由于是从word考过来的，格式不是太好，大家可以直接去下载我的完整word。里面除了翻译还有原创内容。

http://download.csdn.net/detail/kevinwon1985/5230326

Ember.js 没有使用写很多引用的方式来关联对象，而是通过命名约定，来关联路由器、控制器、模版。

应用

当你的应用启动的时候，Ember会查找这些：

• App.ApplicationRoute
• App.ApplicationController
• application 模版

Ember.js 会渲染 application 模版为主模版。 如果你定义了 App.ApplicationController ， Ember.js 会创建一个 App.ApplicationController 的实例，并将这个实例设置为 template 的控制器。也就是说，模版中的需要的数据会从这个控制器实例的属性中获取。

如果你的应用定义了 App.ApplicationRoute，在 application 模版渲染前，Ember.js 会先调用  路由器的钩子方法。

这里是一个使用路由，控制器，模版的简单例子：

1 2 3 4 5 6 7 8 9 10

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' });

1 2 3 4

<!-- application template --> <h1>{{appName}}</h1> <h2>{{title}}</h2>

在 Ember.js 应用中，你只需要指定控制器类， 框架会实例化他们，并将他们提供给模版。

这使得测试你的控制器变的超级简单。并且能确保整个应用，每个控制器只有一个实例。

简单路由

每个路由都有一个以路由名字命名的路由类、控制器、模版。

让我们从一个简单的路由器开始：

1 2 3

App.Router.map(function() { this.route('favorites'); });

如果你导航到/favorites， Ember.js 会查找这些：

• App.FavoritesRoute
• App.FavoritesController
• favorites 模版

Ember.js 会渲染 favorites 模版到 application 模版中的 {{outlet}} ，还会创建一个App.FavoritesController 实例，并且设置为模版的控制器。

如果你的应用定义了 App.FavoritesRoute，框架会在模版渲染前，自动调用它。这跟上面应用中的步骤是一样的。

一个像这样的路由 App.FavoritesRoute，你可能需要实现 model 钩子方法去指定你的控制器将要传递给模版的数据。

例如：

1 2 3 4 5 6

App.FavoritesRoute = Ember.Route.extend({ model: function() { // the model is an Array of all of the posts return App.Post.find(); } });

在这个例子里，我们没有定义FavoritesController。因为这里的 model 方法返回了数组，Ember.js 会自动提供一个 Ember.ArrayController的实例，该实例会将返回的数组作为它的model属性。

相比于直接使用模型，使用 ArrayController 有两点主要好处：

• 任何时候，当你替换了一个控制器的模型， 你不需要通知视图。
• 控制器可以提供额外的计算属性，或者保存不属于模型层的视图的临时状态。 这样使得视图、控制器、模型完全分离。

模版可以遍历控制器中的一个元素：

1 2 3 4 5

<ul> {{#each controller}} <li>{{title}}</li> {{/each}} </ul>

动态参数

如果一个路由使用了动态参数，这个路由的model将基于这个参数的值。

考虑这个路由器定义:

1 2 3

App.Router.map(function() { this.resource('post', { path: '/posts/:post_id' }); });

在这种情况下，这个路由的名字是 post,  Ember.js 会查找这些:

• 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) { return App.Post.find(params.post_id); }, serialize: function(post) { return { post_id: post.get('id') }; } });

因为这种模式很常见，所以路由提供了默认的处理。

• 如果你的动态参数以"_id"结束，model 方法会转换第一部分为应用的命名空间下的一个模型类(post becomes App.Post)。然后调用类的find 方法，并传入动态参数值。
• 默认的serialize 方法会用模型的id属性值给动态参数赋值。

默认的路由器，控制器和模版

如果你没有定义post 路由的路由类 (App.PostRoute)，Ember.js 仍然会使用 App.PostController的数据实例渲染post 模版。

如果你没有定义控制器 (App.PostController)，Ember 会自动创建一个，数据则是路由的 model 方法返回的模型。如果模型是一个数组，该控制器继承自ArrayController ，否则，继承自 ObjectController。

如果你没有定义 post 模版， Ember.js 不会渲染任何东西!

嵌套路由

你可以在resource下嵌套路由。

1 2 3 4 5 6

App.Router.map(function() { this.resource('posts', function() { // the `posts` route this.route('favorites'); // the `posts.favorites` route this.resource('post'); // the `post` route }); });

路由、控制器、模版的名字以资源名开头。对于 post 这种内嵌的资源， 路由的名字是 App.PostRoute，控制器的名字是App.PostController ，模版名字是 post.

当你内嵌一个路由到资源中，路由名被加到 资源名和一个"."后。

这里是上面的路由器中定义的每个路由转换后的名字：

Route Name	Controller	Route	Template
posts	PostsController	PostsRoute	posts
posts.favorites	PostsFavoritesController	PostsFavoritesRoute	posts/favorites
post	PostController	PostRoute	post

按一般的规则，资源名用名词，路由用形容词 (favorites) 或 动词(edit)。这能确保内嵌不会创造出很长的怪异的名字， 但是要避免相同的形容词和动词冲突。

索引路由

无论在哪一级的路由(包括顶层路由)，Ember.js 会自动给 / 路径创建一index路由。

例如，你写了下面一个简单的路由器：

1 2 3

App.Router.map(function() { this.route('favorites'); });

它等价于:

1 2 3 4

App.Router.map(function() { this.route('index', { path: '/' }); this.route('favorites'); });

如果用户访问 /，Ember.js 会查找下面这些：

• App.IndexRoute
• App.IndexController
• index 模版

index 模版会渲染到应用模版的{{outlet}} 。 如果用户导航到/favorites，Ember.js 会使用 favorites 模版替换index 模版。

如下的内嵌路由器：

1 2 3 4 5

App.Router.map(function() { this.resource('posts', function() { this.route('favorites'); }); });

等价于:

1 2 3 4 5 6 7

App.Router.map(function() { this.route('index', { path: '/' }); this.resource('posts', function() { this.route('index', { path: '/' }); this.route('favorites'); }); });

如果用户导航到 /posts，当前路由会是posts.index。 Ember.js 会查找以下这些名字的对象:

• App.PostsIndexRoute
• App.PostsIndexController
• posts/index 模版

首先，posts 模版会渲染到应用模版的 {{outlet}} 。然后，posts/index 模版会渲染到posts 模版的{{outlet}}。

如果用户又导航到/posts/favorites，Ember.js 会替换posts 模版的{{outlet}}中的内容为 posts/favorites 模版。