EmberJS 命名约定

    EmberJS 用了一系列的命名约定,使得各个对象(application,router,model,template...)联系起来。好处是,避免写烦人的简单代码。

    下面的说明 都基于:我们的应用取名 App,

THE APPLICATION

    在应用启动后,Ember自动找App的三个内容:

     1. App.ApplicationRoute  (路由,为了获得数据 )

     2.App.ApplicationController ( 控制器)

     3. application 的模板

     如果找到名称是application的模板,把 ApplicationController 的实例(单例) 与模板绑定,模板可以通过controller属性访问ApplicationController  。

     如果找到了ApplicationRoute  ,那么,在展示模板前,会先执行ApplicationRoute  中的一些钩子, 钩子可以看成一个拦截器,对一个Route对象,定义的钩子有model, setupController. 下面是个例子:

   

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>

 

SIMPLE ROUTES

    对于每一个路由,Ember认为都会有一个控制器,以及相同名字的模板。例如,下例定义了一个路由 favorites

 

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

     对应 favorites 这个路由,Ember将查找以下三个内容

    1.App.FavoritesRoute

     2. App.FavaritesController

     3. 名称叫 favorites 的模板

     Ember 会把 favorites的内容填到application模板中的{{outlet}}中,并把FavoritesController的实例作为模板的controller属性。

     如果给出了 FavoritesRoute, 在渲染模板前,先实例化FavoritesRoute(用来准备数据)

 

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

 

 

   在上面的例子中,没有指定FavoritesController, 但 Ember 判断到 model 是一个数组,所以会把 ArrayController 与模板绑定,在模板中可以这样写

  

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

 

 

DYNAMIC SEGMENTS(route)

    动态的段(路由),对应带参数的URL,比如

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

    与简单路由一样,Ember也同样会寻找 App.PostRoute, App.PostController ,post模板。

    App.PostRouter 例子:

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

   model方法根据post_id找到数据。serialize 方法提供了参数,该参数在model转成URL中用到。

   如果在动态段中是以_id 为结尾,model钩子会把参数前部分(post) 作为类名称,也就是认为有一个类叫App.Post, 返回的实例的类就是App.Post.

 

ROUTE, CONTROLLER AND TEMPLATE DEFAULTS

   如果一个Route 没有指定Controller,Ember依然会根据Route 返回的Model类型创建Controller. 

   1. 如果model是数组,创建ArrayController

    2.如果mode是对象,创建ObjectController

  如果没有对应的模板,会啥也不做。

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

 

    上例定义了posts 下还有 post.favorites, posts.post 两个子路由,对于子路由,Ember依旧会找Controller,Route,及模板,比如:

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

 

THE INDEX ROUTE

 

   每一级路由(包括顶层),Ember都会产生一个叫index 的路由,比如:

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

    等同于:

  

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

   如果访问 / ,Ember就会找

   App.IndexRoute, AppIndexControll, index的模板。index模板会渲染到application 模板的{{outlet}}中

   

   进一步的例子:

   

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, 那么当前的路由就是posts.index, Ember 模板  App.PostIndexRoute,App.PostIndexController,以及 posts/index 模板。posts模板会渲染到application 模板的{{outlet}}中,而posts/index模板会渲染到post模板的{{outlet}}中.

   如果该部/posts/favorites ,post/favarites模板会渲染到  post 模板的{{outlet}}中。

 

总结:

1. 每个应用应该有 controller,route,application模板

2. 每个路由,也应用相应的 controller,route,application。

   

你可能感兴趣的:(前端MVC EmberJS)