在高層，你通過(guò)設(shè)計(jì)一系列符合嵌套的應(yīng)用狀態(tài)的嵌套的路由來(lái)組織 Ember 應(yīng)用。本 指導(dǎo)會(huì)首先涵蓋高層概念，然后用一個(gè)例子貫穿整個(gè)講解。

路由

用戶通過(guò)決定瀏覽什么來(lái)在你的應(yīng)用中穿梭。例如，如果你有一個(gè) blog，你的用戶會(huì) 首先在“關(guān)于”頁(yè)面和“文章列表”間選擇。一般地，你想要給這個(gè)首先的選擇一個(gè)默認(rèn)值 （在這種情況下，可能是“文章列表”）。

一旦用戶做出了他們的***次選擇，他們通常沒(méi)有完成。在“文章列表”的上下文中，用 戶***會(huì)選擇某篇文章和它的評(píng)論。在單篇文章頁(yè)面中，他們可以在評(píng)論列表和引用通 知列表中選擇。

重要的是，在所有這些情況中，用戶只是在頁(yè)面上顯示的東西中做選擇。如果你深入應(yīng) 用的狀態(tài)，這些選擇只影響頁(yè)面上的更小的區(qū)域。

在接下來(lái)的一節(jié)，我們會(huì)介紹如何控制頁(yè)面上的這些區(qū)域。那么現(xiàn)在，讓我們看看如何 構(gòu)建你的模板。

當(dāng)用戶最開始訪問(wèn)到應(yīng)用時(shí)，應(yīng)用顯示在屏幕上，并且有一個(gè)空的、路由可控制的插 座。在 Ember 中，一個(gè) outlet 是模板上的一個(gè)區(qū)域，這個(gè)區(qū)域由子模板在運(yùn)行時(shí) 基于用戶交互來(lái)決定。

應(yīng)用模板（ application.handlebars ）看起來(lái)會(huì)是這樣：

<h1>我的應(yīng)用</h1> 
{{outlet}} 

​默認(rèn)情況下，路由起先會(huì)進(jìn)入 文章列表 狀態(tài)，然后把插座用 posts.handlebars填充。之后我們會(huì)看到這如何確切地奏效。

與期待一致， 文章列表 模板會(huì)渲染一個(gè)文章列表。點(diǎn)擊單篇文章的鏈接會(huì)用單篇文 章的模板來(lái)替換應(yīng)用的插座中的內(nèi)容。

模板看起來(lái)是這樣：

{{#each post in controller}} 
<h1><a {{action showPost post href=true}}>{{post.title}}</a></h1> 
<div>{{post.intro}}</div> 
{{/each}} 

當(dāng)點(diǎn)擊單篇文章的連接，應(yīng)用會(huì)轉(zhuǎn)移到 單篇文章 狀態(tài)，并用 post.handlebars 來(lái)替換應(yīng)用插座中的 posts.handlebars 。

在這種情況下，單篇文章也可以有插座。插座會(huì)允許用戶在評(píng)論和引用通知之間選擇。

單篇文章的模板看起來(lái)是這樣：

<h1>{{title}}</h1> 
<div class="body"> 
  {{body}} 
</div> 
{{outlet}} 

{{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)見轉(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}} 
  <h1><a {{action showPost post href=true}}>{{post.title}}</a></h1> 
{{/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)。

這是單篇文章的模板：

<h1>{{title}}</h1> 
<div class="body"> 
  {{body}} 
</div> 
<p> 
  <a {{action showComments href=true}}>評(píng)論</a> | 
  <a {{action showTrackbacks href=true}}>引用通知</a> 
</p> 
{{outlet}} 

***，這個(gè)嵌套配置下，從書簽鏈接返回頁(yè)面也會(huì)正常工作。讓我們看一下當(dāng)用戶從posts/1/trackbacks 訪問(wèn)站點(diǎn)時(shí)發(fā)生了什么。

• 路由決定 URL 關(guān)聯(lián)的狀態(tài)（ post.trackbacks ），然后進(jìn)入狀態(tài)。
• 對(duì)經(jīng)過(guò)的每個(gè)狀態(tài)，路由解壓任何的動(dòng)態(tài)段并調(diào)用 connectOutlets 。這鏡像了用 戶用來(lái)在應(yīng)用中瀏覽的路徑。與之前一樣，路由會(huì)在文章上以 App.Post.find(1)的結(jié)果調(diào)用 connectOutlet 。
• 當(dāng)路由進(jìn)入到引用通知的狀態(tài)，它會(huì)調(diào)用 connectOutlets 。因?yàn)?post 的connectOutlets 方法已經(jīng)設(shè)置了 postController 的 content ，引用通知狀 態(tài)會(huì)檢索關(guān)聯(lián)。

再一次，由于 connectOutlets 回調(diào)與動(dòng)態(tài) URL 段協(xié)同工作，由 {{action}} 輔 助標(biāo)記生成的 URL 會(huì)之后會(huì)保證奏效。

異步

***一點(diǎn)：你會(huì)問(wèn)你自己，當(dāng)應(yīng)用在 App.Post.find(1) 調(diào)用時(shí)還沒(méi)有加載“文章1” 這個(gè)系統(tǒng)如何正常工作。

這會(huì)奏效的原因是 ember-data 總是立即返回一個(gè)對(duì)象，即使它需要開啟一個(gè)查詢。 那個(gè)對(duì)象以一個(gè)空的 data 散列值開始。當(dāng)服務(wù)器返回?cái)?shù)據(jù)， ember-data 更新對(duì) 象的 data ，這也出發(fā)所有定義的屬性（用 DS.attr 定義的屬性）上的綁定。

當(dāng)你要這個(gè)對(duì)象查詢它的 trackbacks ，它也會(huì)返回一個(gè)空的 ManyArray 。當(dāng)服 務(wù)器一同返回文章和與之關(guān)聯(lián)的內(nèi)容時(shí)， ember-data 會(huì)自動(dòng)更新 trackbacks 數(shù) 組。

在你的 trackbacks.handlebars 模板中，你會(huì)做好這些：

<ul> 
{{#each trackback in controller}} 
  <li><a {{bindAttr href="trackback.url"}}>{{trackback.title}}</a></li> 
{{/each}} 
</ul> 

當(dāng) ember-data 更新 trackbacks 數(shù)組，變更會(huì)通過(guò) trackbacksController 傳 播至 DOM。

你也會(huì)想要避免展示尚未加載的局部數(shù)據(jù)。在這種情況下，你可以這么做：

<ul> 
{{#if controller.isLoaded}} 
  {{#each trackback in controller}} 
    <li><a {{bindAttr href="trackback.url"}}>{{trackback.title}}</a></li> 
  {{/each}} 
{{else}} 
  <li><img src="/spinner.gif">加載引用通知……</li> 
{{/if}} 
</ul> 

當(dāng) ember-data 用服務(wù)器提供的數(shù)據(jù)把引用通知填入到 ManyArray 里，它也會(huì)設(shè) 置 isLoaded 屬性。因?yàn)樗械陌?#if 的模板結(jié)構(gòu)會(huì)在底層屬性變化時(shí)自動(dòng)更 新 DOM，這會(huì)“恰好奏效”。