1.2 Getting Started--Naming Conventions(命名约定)

Ember.js使用一个运行时解析器去连接你的对象而没有很多样板文件。作为一个开发者，如果你把code放到约定好的位置这个解析器会自动工作。

 

一、The Application

    1. 当你的app启动时，Ember.js将渲染application template作为主要模板。

 

     2. 如果提供了 controller:application， Ember.js将设置一个 controller:application的实例作为template的controller。这意味着，这个template将从controller中获取属性。

 

    3. 如果app提供了一个路由 app/routes/application.js，Ember.js将在加载application template之前先调用这个路由的挂钩。

       钩子作为方法被实现，在Ember对象的声明周期内，它们提供访问点通过拦截和执行代码去修改这些访问点的默认行为来满足你的需求。

       Ember为了各种各样的目的提供了许多可用的hooks。

 

    4.  example:

　　下面是一个使用route，controller和template的简单的例子：

• app/routes/application.js

 

1 export default Ember.Route.extend({
2     model() {
3         return { title: "Hello World" };
4     }
5 });

• app/controllers/application.js

1 export default Ember.Controller.extend({
2     appName: 'My First Example'
3 });

• app/templates/application/hbs     

1 <h1>{{appName}}</h1>
2 <h2>{{model.title}}</h2>

5. 在Ember.js应用程序中，你总会提供你的对象作为类，框架负责实例化它们并通过运行时解析器把它们提供给templates。

二、Simplement Routes（简单路由）

1. 每一个route都会有一个和它名字相同的controller和template。

2. A simple router:

1 var Router = Ember.Router.extend();
2 
3 Router.map(function () {
4     this.route('favorites');
5 });
6 
7 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的钩子去指定那个你的controller会展现到template的model。

example:

1 import ajax from 'ic-ajax';
2  
3 export default Ember.Route.extend({
4      model() {
5          //the model is an Array of all of the posts
6         //fetched from this url
7        reutrn ajax('/a/service/url/where/posts/live');
8      }   
9 });

• 在这个例子中，我们没有提供一个controller:favorites。因为model是一个数组，Ember.js会自动提供一个Ember.ArrayController的实例，它会展现backing Array作为它的模型。
• 你可以把Ember.ArrayController看做犹如模型本身。这么做的好处就是，你可以随时更换controller的model，而无需直接通知模板和组件的变化。

4. template可以遍历控制器的元素：

1 <ul>
2 {{#each controller as |item|}}
3   <li>{{item.title}}</li>
4 {{/each}}
5 </ul>

三、动态段（a URL that includes a parameter）

如果route使用动态段（一个包含参数的URL），路由的model将会基于用户提供的动态段的值。

1. 考虑一下这个路由定义

app/route.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}}中。

如果用户导航到post/favorites，Ember.js将会用posts/favorites模板替换posts模板中的{{outlet}}。