我的應(yīng)用
 
  
  
  
{{outlet}} 
 
 

 
 
 
  
  
  
{{#each post in controller}} 
  
  
  
{{post.title}}
 
  
  
  
{{post.intro}}
 
  
  
  
{{/each}} 
 
 

 
 
 
  
  
  
{{title}}
 
  
  
  
 
  
  
  
  {{body}} 
  
  
  

{{outlet}} 再次指定了路由來(lái)決定這個(gè)區(qū)域放置什么的模板。

因?yàn)?{{outlet}} 是所有模板的特性，當(dāng)你深入路由層級(jí)，每個(gè)路由會(huì)自然地控制頁(yè) 面上的更小區(qū)域。

#p#

它如何工作

現(xiàn)在你理解了基本理論，讓我們看看路由是如何控制你的插座的。

模板、控制器以及視圖

首先，對(duì)于每個(gè)高層 Handlebars 模板，你同樣也會(huì)有一個(gè)同名的視圖和控制器。例 如：

• application.handlebars: 應(yīng)用主視圖的模板
• App.ApplicationController: 上述模板的控制器。 application.handlebars的初始變量上下文是這個(gè)控制器的一個(gè)實(shí)例
• App.ApplicationView: 上述模板的視圖對(duì)象

一般地，你會(huì)用視圖對(duì)象來(lái)處理事件，并用控制器對(duì)象來(lái)向模板提供數(shù)據(jù)。

Ember 提供兩種基本類型的控制器， ObjectController 和 ArrayController 。 這些控制器充當(dāng)模型對(duì)象和模型對(duì)象列表的代理。

我們以控制器開始，而不是直接向模板暴露模型對(duì)象，這樣你才有余地使用視圖關(guān)聯(lián)的 計(jì)算屬性，并且最終視圖關(guān)系不會(huì)污染你的模型。

你也可以用模板關(guān)聯(lián)的控制器連接 {{outlet}} 。

路由

應(yīng)用的路由負(fù)責(zé)讓應(yīng)用在狀態(tài)見(jiàn)轉(zhuǎn)移來(lái)響應(yīng)用戶的動(dòng)作。

我們以一個(gè)簡(jiǎn)單的路由開始：

 
 
 
  
  
  
App.Router = Ember.Router.extend({ 
  
  
  
  root: Ember.Route.extend({ 
  
  
  
    index: Ember.Route.extend({ 
  
  
  
      route: '/', 
  
  
  
      redirectsTo: 'posts' 
  
  
  
    }), 
  
  
  
    posts: Ember.Route.extend({ 
  
  
  
      route: '/posts' 
  
  
  
    }), 
  
  
  
    post: Ember.Route.extend({ 
  
  
  
      route: '/posts/:post_id' 
  
  
  
    }) 
  
  
  
  }) 
  
  
  
}); 
 
 

這個(gè)路由設(shè)置了三個(gè)頂層的狀態(tài)：一個(gè)索引頁(yè)狀態(tài)。一個(gè)顯示文章列表的狀態(tài)和一個(gè) 顯示單篇文章的狀態(tài)。

在我們的案例中，我們會(huì)簡(jiǎn)單重定向索引頁(yè)路由到 posts 狀態(tài)。在其它應(yīng)用中，你 也許會(huì)需要一個(gè)獨(dú)立的主頁(yè)。

目前為止，我們已經(jīng)有了一個(gè)狀態(tài)列表，并且我們的應(yīng)用也會(huì)盡職盡責(zé)地進(jìn)入到 posts 狀態(tài)，但這不會(huì)做任何事。當(dāng)應(yīng)用進(jìn)入到 posts 狀態(tài)，我們要它連接到應(yīng) 用模板中的 {{outlet}} 。我們用 connectOutlets 回調(diào)來(lái)完成這個(gè)工作。

 
 
 
  
  
  
App.Router = Ember.Router.extend({ 
  
  
  
  root: Ember.Route.extend({ 
  
  
  
    index: Ember.Route.extend({ 
  
  
  
      route: '/', 
  
  
  
      redirectsTo: 'posts' 
  
  
  
    }), 
  
  
  
    posts: Ember.Route.extend({ 
  
  
  
      route: '/posts', 
  
  
  
      connectOutlets: function(router) { 
  
  
  
        router.get('applicationController').connectOutlet('posts', App.Post.find()); 
  
  
  
      } 
  
  
  
    }), 
  
  
  
    post: Ember.Route.extend({ 
  
  
  
      route: '/posts/:post_id' 
  
  
  
    }) 
  
  
  
  }) 
  
  
  
}); 
 
 

connectOutlet 調(diào)用會(huì)為我們做這些事：

• 它創(chuàng)建一個(gè) App.PostsView 的新實(shí)例，使用 posts.handlebars 模板。
• 它設(shè)置 postsController 的 content 屬性為一個(gè)所有可用文章（App.Post.find() ） 的列表，并讓 postsController 作為新的App.PostsView 的控制器。
• 它把新視圖連接到 application.handlebars 的插座上。

一般地，你應(yīng)該值考慮這些對(duì)象為串聯(lián)的操作。當(dāng)你創(chuàng)建一個(gè)視圖，你總是會(huì)為視圖的 控制器提供內(nèi)容。

過(guò)渡和 URL

下一步，我們要為 posts 狀態(tài)中的應(yīng)用提供一種遷移到 post 狀態(tài)的方法。我們 通過(guò)指定一個(gè)過(guò)渡來(lái)完成這個(gè)工作。

 
 
 
  
  
  
posts: Ember.Route.extend({ 
  
  
  
  route: '/posts', 
  
  
  
  showPost: Ember.Route.transitionTo('post'), 
  
  
  
  connectOutlets: function(router) { 
  
  
  
    router.get('applicationController').connectOutlet('posts', App.Post.find()); 
  
  
  
  } 
  
  
  
}) 
 
 

你用當(dāng)前模板中的 {{action}} 輔助標(biāo)記調(diào)用這個(gè)過(guò)渡。

 
 
 
  
  
  
{{#each post in controller}} 
  
  
  
  
{{post.title}}
 
  
  
  
{{/each}} 
 
 

當(dāng)用戶點(diǎn)擊一個(gè)帶有 {{action}} 輔助標(biāo)記的鏈接時(shí)，Ember 會(huì)把一個(gè)事件分配到指 定名稱的當(dāng)前狀態(tài)。在這種情況下，事件是一個(gè)過(guò)渡。

因?yàn)槲覀兪褂昧艘粋€(gè)過(guò)渡，Ember 也可以為這個(gè)鏈接生成 URL。Ember 用上下文中的 id 屬性來(lái)填充 post 狀態(tài)中的 :post_id 動(dòng)態(tài)段。

下一步，我們會(huì)需要在 post 狀態(tài)上實(shí)現(xiàn) connectOutlets 。這次， connectOutlets 方法會(huì)接受 {{action}} 輔助標(biāo)記上下文指定的文章對(duì)象。

 
 
 
  
  
  
post: Ember.Route.extend({ 
  
  
  
  route: '/posts/:post_id', 
  
  
  
  connectOutlets: function(router, post) { 
  
  
  
    router.get('applicationController').connectOutlet('post', post); 
  
  
  
  } 
  
  
  
}) 
 
 

connectOutlet 調(diào)用執(zhí)行的一系列步驟可以概括為如下：

• 它用 post.handlebars 模板創(chuàng)建了一個(gè) App.PostView 的新實(shí)例。
• 它設(shè)置了用戶點(diǎn)擊的文章的 postController 的 content 屬性。
• 它把新視圖連接到 application.handlebars 中的插座。

如果用戶把頁(yè)面存為書簽并在之后返回，你不需要任何額外的操作來(lái)讓鏈接（ /posts/1 ） 正常工作。

如果用戶***次以 posts/1 URL 訪問(wèn)頁(yè)面，路由會(huì)執(zhí)行這幾個(gè)步驟：

• 斷定 URL 符合的狀態(tài)（在本例中是 post ）。
• 從 URL 中解壓動(dòng)態(tài)段（在本例中是 :post_id ）并調(diào)用App.Post.find(post_id) 。這使用一個(gè)命名約定來(lái)奏效：:post_id 動(dòng)態(tài)段對(duì)應(yīng) App.Post 。
• 用 App.Post.find 的返回值調(diào)用 connectOutlets 。

這意味著不管用戶是否從頁(yè)面中的另一部分或是通過(guò) URL 進(jìn)入到 post 狀態(tài)，路由 都會(huì)以相同的對(duì)象調(diào)用 connectOutlets 方法。

#p#

嵌套

***，讓我們實(shí)現(xiàn)評(píng)論和引用通知功能。

因?yàn)?post 狀態(tài)使用和 root 狀態(tài)相同的模式，它看起來(lái)非常類似。

 
 
 
  
  
  
post: Ember.Route.extend({ 
  
  
  
  route: '/posts/:post_id', 
  
  
  
  connectOutlets: function(router, post) { 
  
  
  
    router.get('applicationController').connectOutlet('post', post); 
  
  
  
  }, 
  
  
  
  index: Ember.Route.extend({ 
  
  
  
    route: '/', 
  
  
  
    redirectsTo: 'comments' 
  
  
  
  }), 
  
  
  
  comments: Ember.Route.extend({ 
  
  
  
    route: '/comments', 
  
  
  
    showTrackbacks: Ember.Route.transitionTo('trackbacks'), 
  
  
  
    connectOutlets: function(router) { 
  
  
  
      var postController = router.get('postController'); 
  
  
  
      postController.connectOutlet('comments', postController.get('comments')); 
  
  
  
    } 
  
  
  
  }), 
  
  
  
  trackbacks: Ember.Route.extend({ 
  
  
  
    route: '/trackbacks', 
  
  
  
    showComments: Ember.Route.transitionTo('comments'), 
  
  
  
    connectOutlets: function(router) { 
  
  
  
      var postController = router.get('postController'); 
  
  
  
      postController.connectOutlet('trackbacks', postController.get('trackbacks')); 
  
  
  
    } 
  
  
  
  }) 
  
  
  
}) 
 
 

這里只發(fā)生了這些變化：

• 我們只在狀態(tài)內(nèi)指定了 showTrackbacks 和 showComments 過(guò)渡，而狀態(tài)里過(guò)渡 才有意義。
• 既然我們正在獲取給 post.handlebars 使用的視圖，我們調(diào)用 postController 上的 connectOutlet
• 這種情況下，我們從當(dāng)前文章中獲取 commentsController 和 trackbacksController 的內(nèi)容。 postController 是一個(gè)底層文章模型的代 理，所以我們可以直接用 postController 直接檢索關(guān)聯(lián)。

這是單篇文章的模板：

 
 
 
  
  
  
{{title}}
 
  
  
  
 
  
  
  
  {{body}}