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

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

 
 
 
  
  
  
{{title}}
 
  
  
  
 
  
  
  
  {{body}} 
  
  
  

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

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

#p#

它如何工作

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

模板、控制器以及視圖

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

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

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

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

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

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

路由

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

我們以一個簡單的路由開始：

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

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

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

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

 
 
 
  
  
  
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)用會為我們做這些事：

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

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

過渡和 URL

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

 
 
 
  
  
  
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)用這個過渡。

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

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

因為我們使用了一個過渡，Ember 也可以為這個鏈接生成 URL。Ember 用上下文中的 id 屬性來填充 post 狀態(tài)中的 :post_id 動態(tài)段。

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

 
 
 
  
  
  
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)建了一個 App.PostView 的新實例。
• 它設(shè)置了用戶點擊的文章的 postController 的 content 屬性。
• 它把新視圖連接到 application.handlebars 中的插座。

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

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

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

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

#p#

嵌套

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

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

這是單篇文章的模板：

 
 
 
  
  
  
{{title}}
 
  
  
  
 
  
  
  
  {{body}}