Ember應(yīng)用結(jié)構(gòu)
在高層，你通過設(shè)計(jì)一系列符合嵌套的應(yīng)用狀態(tài)的嵌套的路由來組織 Ember 應(yīng)用。本 指導(dǎo)會(huì)首先涵蓋高層概念，然后用一個(gè)例子貫穿整個(gè)講解。
路由
用戶通過決定瀏覽什么來在你的應(yīng)用中穿梭。例如，如果你有一個(gè) blog，你的用戶會(huì) 首先在“關(guān)于”頁面和“文章列表”間選擇。一般地，你想要給這個(gè)首先的選擇一個(gè)默認(rèn)值 （在這種情況下，可能是“文章列表”）。
一旦用戶做出了他們的***次選擇，他們通常沒有完成。在“文章列表”的上下文中，用 戶***會(huì)選擇某篇文章和它的評(píng)論。在單篇文章頁面中，他們可以在評(píng)論列表和引用通 知列表中選擇。
重要的是，在所有這些情況中，用戶只是在頁面上顯示的東西中做選擇。如果你深入應(yīng) 用的狀態(tài)，這些選擇只影響頁面上的更小的區(qū)域。
在接下來的一節(jié)，我們會(huì)介紹如何控制頁面上的這些區(qū)域。那么現(xiàn)在，讓我們看看如何 構(gòu)建你的模板。
當(dāng)用戶最開始訪問到應(yīng)用時(shí)，應(yīng)用顯示在屏幕上，并且有一個(gè)空的、路由可控制的插 座。在 Ember 中，一個(gè) outlet 是模板上的一個(gè)區(qū)域，這個(gè)區(qū)域由子模板在運(yùn)行時(shí) 基于用戶交互來決定。
應(yīng)用模板（ application.handlebars ）看起來會(huì)是這樣：
- <h1>我的應(yīng)用</h1>
- {{outlet}}
默認(rèn)情況下，路由起先會(huì)進(jìn)入 文章列表 狀態(tài)，然后把插座用 posts.handlebars填充。之后我們會(huì)看到這如何確切地奏效。
與期待一致， 文章列表 模板會(huì)渲染一個(gè)文章列表。點(diǎn)擊單篇文章的鏈接會(huì)用單篇文 章的模板來替換應(yīng)用的插座中的內(nè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 來替換應(yīng)用插座中的 posts.handlebars 。
在這種情況下，單篇文章也可以有插座。插座會(huì)允許用戶在評(píng)論和引用通知之間選擇。
單篇文章的模板看起來是這樣：
- <h1>{{title}}</h1>
- <div class="body">
- {{body}}
- </div>
- {{outlet}}
{{outlet}} 再次指定了路由來決定這個(gè)區(qū)域放置什么的模板。
因?yàn)?{{outlet}} 是所有模板的特性，當(dāng)你深入路由層級(jí)，每個(gè)路由會(huì)自然地控制頁 面上的更小區(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ì)象來處理事件，并用控制器對(duì)象來向模板提供數(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)移來響應(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è)索引頁狀態(tài)。一個(gè)顯示文章列表的狀態(tài)和一個(gè) 顯示單篇文章的狀態(tài)。
在我們的案例中，我們會(huì)簡(jiǎn)單重定向索引頁路由到 posts 狀態(tài)。在其它應(yīng)用中，你 也許會(huì)需要一個(gè)獨(dú)立的主頁。
目前為止，我們已經(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)來完成這個(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)容。
過渡和 URL
下一步，我們要為 posts 狀態(tài)中的應(yīng)用提供一種遷移到 post 狀態(tài)的方法。我們 通過指定一個(gè)過渡來完成這個(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è)過渡。
- {{#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è)過渡。
因?yàn)槲覀兪褂昧艘粋€(gè)過渡，Ember 也可以為這個(gè)鏈接生成 URL。Ember 用上下文中的 id 屬性來填充 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中的插座。
如果用戶把頁面存為書簽并在之后返回，你不需要任何額外的操作來讓鏈接（ /posts/1 ） 正常工作。
如果用戶***次以 posts/1 URL 訪問頁面，路由會(huì)執(zhí)行這幾個(gè)步驟：
- 斷定 URL 符合的狀態(tài)（在本例中是
post）。 - 從 URL 中解壓動(dòng)態(tài)段（在本例中是
:post_id）并調(diào)用App.Post.find(post_id)。這使用一個(gè)命名約定來奏效：:post_id動(dòng)態(tài)段對(duì)應(yīng)App.Post。 - 用
App.Post.find的返回值調(diào)用connectOutlets。
這意味著不管用戶是否從頁面中的另一部分或是通過 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)相同的模式，它看起來非常類似。
- 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 是一個(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è)嵌套配置下，從書簽鏈接返回頁面也會(huì)正常工作。讓我們看一下當(dāng)用戶從posts/1/trackbacks 訪問站點(diǎn)時(shí)發(fā)生了什么。
- 路由決定 URL 關(guān)聯(lián)的狀態(tài)（ post.trackbacks ），然后進(jìn)入狀態(tài)。
- 對(duì)經(jīng)過的每個(gè)狀態(tài)，路由解壓任何的動(dòng)態(tài)段并調(diào)用 connectOutlets 。這鏡像了用 戶用來在應(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ì)問你自己，當(dāng)應(yīng)用在 App.Post.find(1) 調(diào)用時(shí)還沒有加載“文章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ì)通過 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ì)“恰好奏效”。
