Ember應(yīng)用結(jié)構(gòu)
在高層，你通過設(shè)計一系列符合嵌套的應(yīng)用狀態(tài)的嵌套的路由來組織 Ember 應(yīng)用。本 指導(dǎo)會首先涵蓋高層概念，然后用一個例子貫穿整個講解。
路由
用戶通過決定瀏覽什么來在你的應(yīng)用中穿梭。例如，如果你有一個 blog，你的用戶會 首先在“關(guān)于”頁面和“文章列表”間選擇。一般地，你想要給這個首先的選擇一個默認值 （在這種情況下，可能是“文章列表”）。
一旦用戶做出了他們的***次選擇，他們通常沒有完成。在“文章列表”的上下文中，用 戶***會選擇某篇文章和它的評論。在單篇文章頁面中，他們可以在評論列表和引用通 知列表中選擇。
重要的是，在所有這些情況中，用戶只是在頁面上顯示的東西中做選擇。如果你深入應(yīng) 用的狀態(tài)，這些選擇只影響頁面上的更小的區(qū)域。
在接下來的一節(jié)，我們會介紹如何控制頁面上的這些區(qū)域。那么現(xiàn)在，讓我們看看如何 構(gòu)建你的模板。
當(dāng)用戶最開始訪問到應(yīng)用時，應(yīng)用顯示在屏幕上，并且有一個空的、路由可控制的插 座。在 Ember 中，一個 outlet 是模板上的一個區(qū)域，這個區(qū)域由子模板在運行時 基于用戶交互來決定。
應(yīng)用模板（ application.handlebars ）看起來會是這樣：
- <h1>我的應(yīng)用</h1>
- {{outlet}}
默認情況下，路由起先會進入 文章列表 狀態(tài)，然后把插座用 posts.handlebars填充。之后我們會看到這如何確切地奏效。
與期待一致， 文章列表 模板會渲染一個文章列表。點擊單篇文章的鏈接會用單篇文 章的模板來替換應(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)點擊單篇文章的連接，應(yīng)用會轉(zhuǎn)移到 單篇文章 狀態(tài)，并用 post.handlebars 來替換應(yīng)用插座中的 posts.handlebars 。
在這種情況下，單篇文章也可以有插座。插座會允許用戶在評論和引用通知之間選擇。
單篇文章的模板看起來是這樣：
- <h1>{{title}}</h1>
- <div class="body">
- {{body}}
- </div>
- {{outlet}}
{{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}} 輔助標記調(diào)用這個過渡。
- {{#each post in controller}}
- <h1><a {{action showPost post href=true}}>{{post.title}}</a></h1>
- {{/each}}
當(dāng)用戶點擊一個帶有 {{action}} 輔助標記的鏈接時，Ember 會把一個事件分配到指 定名稱的當(dāng)前狀態(tài)。在這種情況下，事件是一個過渡。
因為我們使用了一個過渡，Ember 也可以為這個鏈接生成 URL。Ember 用上下文中的 id 屬性來填充 post 狀態(tài)中的 :post_id 動態(tài)段。
下一步，我們會需要在 post 狀態(tài)上實現(xiàn) connectOutlets 。這次， connectOutlets 方法會接受 {{action}} 輔助標記上下文指定的文章對象。
- 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)。
這是單篇文章的模板：
- <h1>{{title}}</h1>
- <div class="body">
- {{body}}
- </div>
- <p>
- <a {{action showComments href=true}}>評論</a> |
- <a {{action showTrackbacks href=true}}>引用通知</a>
- </p>
- {{outlet}}
***，這個嵌套配置下，從書簽鏈接返回頁面也會正常工作。讓我們看一下當(dāng)用戶從posts/1/trackbacks 訪問站點時發(fā)生了什么。
- 路由決定 URL 關(guān)聯(lián)的狀態(tài)（ post.trackbacks ），然后進入狀態(tài)。
- 對經(jīng)過的每個狀態(tài)，路由解壓任何的動態(tài)段并調(diào)用 connectOutlets 。這鏡像了用 戶用來在應(yīng)用中瀏覽的路徑。與之前一樣，路由會在文章上以 App.Post.find(1)的結(jié)果調(diào)用 connectOutlet 。
- 當(dāng)路由進入到引用通知的狀態(tài)，它會調(diào)用 connectOutlets 。因為 post 的connectOutlets 方法已經(jīng)設(shè)置了 postController 的 content ，引用通知狀 態(tài)會檢索關(guān)聯(lián)。
再一次，由于 connectOutlets 回調(diào)與動態(tài) URL 段協(xié)同工作，由 {{action}} 輔 助標記生成的 URL 會之后會保證奏效。
異步
***一點：你會問你自己，當(dāng)應(yīng)用在 App.Post.find(1) 調(diào)用時還沒有加載“文章1” 這個系統(tǒng)如何正常工作。
這會奏效的原因是 ember-data 總是立即返回一個對象，即使它需要開啟一個查詢。 那個對象以一個空的 data 散列值開始。當(dāng)服務(wù)器返回數(shù)據(jù)， ember-data 更新對 象的 data ，這也出發(fā)所有定義的屬性（用 DS.attr 定義的屬性）上的綁定。
當(dāng)你要這個對象查詢它的 trackbacks ，它也會返回一個空的 ManyArray 。當(dāng)服 務(wù)器一同返回文章和與之關(guān)聯(lián)的內(nèi)容時， ember-data 會自動更新 trackbacks 數(shù) 組。
在你的 trackbacks.handlebars 模板中，你會做好這些：
- <ul>
- {{#each trackback in controller}}
- <li><a {{bindAttr href="trackback.url"}}>{{trackback.title}}</a></li>
- {{/each}}
- </ul>
當(dāng) ember-data 更新 trackbacks 數(shù)組，變更會通過 trackbacksController 傳 播至 DOM。
你也會想要避免展示尚未加載的局部數(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 里，它也會設(shè) 置 isLoaded 屬性。因為所有的包含 #if 的模板結(jié)構(gòu)會在底層屬性變化時自動更 新 DOM，這會“恰好奏效”。
