點燃圣火！Ember.js 的初學者指南
現在，到處都可以看到復雜的 JavaScript 應用程序。 由于這些應用程序變得越來越復雜，一長串的 jQuery 回調語句，或者通過應用程序在各個點執行不同的函數調用，這些都變得無法再讓人接受。 這導致了 JavaScript 開發人員了解到傳統的軟件程序員已經知道了幾十年的問題： 組織和效率非常重要，并且可以對應用程序的性能是否優異產生重大影響。
實現組織和效率的其中一個最常用的架構模式，被稱為 Model View Controller （縮寫為 MVC） 。 這種模式鼓勵開發人員將其應用程序的不同部分分割為更易于管理的塊。 您不必使用一個函數直接調用數據庫，您可以創建了一個 Model（模型）來為您管理數據庫。 您不必使用一個布滿輸出和邏輯語句的 HTML文件，一個簡單的模板或 View（視圖）就可以您簡化顯示代碼。 最后，Controller（控制器）管理您的應用程序的流，幫助各種零散的部件更高效地互相溝通。 在您的應用程序中使用這個模式，可以更輕松地增加新的功能。
作為最近爆發的基于 Internet 的軟件開發的一部分，出現了一堆令人眼花繚亂的 MVC 框架，比如 Ember.js、Backbone.js、Knockout.js、Spine.js、Batman.js 和 Angular.js。 一方面是初級和中級開發人員，另一方面是骨灰級程序員，以 JavaScript 編寫并針對 JavaScript 開發而設計的這些庫補充了這兩者之間的空白。 它們提供多種特性和功能，根據開發人員的需求滿足技能水平各異的不同開發人員。
在本教程中，您將通過構建一個可用的 Twitter 時間軸查看器，更熟悉 Ember.js。
Ember.js 簡介
Ember.js 是 JavaScript 框架包中最新的成員之一。 它演變出了最初于 2007 年創建的 SproutCore 項目，Apple 在包括 MobileMe 在內的各種 web 應用程序中大量使用了該項目。 在 emberjs.com，Ember 被形容為 "一個 JavaScript 框架，用于創建可以消除樣板并提供標準應用程序架構的大型 web 應用程序。" 它本身緊密集成了名為 Handlebars 的模板引擎，該引擎為 Ember 提供了其中一個最強大的功能： 雙向數據綁定。 Ember 還提供了其他功能，比如狀態管理（某個用戶狀態是已注銷還是已登錄）、自動更新模板（當底層數據發生變化時，您的 UI 也同樣發生變化）以及計算屬性 (firstName + lastName = fullName)。 Ember 經過一年可靠的開發后，已經成為一個強大的參與者。
Ember 只有一個依賴項—jQuery。 Ember 應用程序的樣板 HTML 設置看起來應該與下面的代碼類似。 請注意，jQuery 和 Ember 都從 CDN（內容交付網絡）進行更新。 如果用戶在早些時候訪問需要這些文件的其他網站時已經下載過這些文件，這會加快用戶的頁面加載速度。
- <html>
- <head>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
- </script>
- <script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.6.min.js">
- </script>
- <script src="js/app.js">
- </script>
- </head>
- <body>
- </body>
- </html>
定義 MVC
在您繼續本教程之前，更明確地定義 MVC 可能會是一個好主意。 這個概念在 1979 年已經出現，自那時以來，該模式已經出現一些不同的變體。 最常見的流程通常是這樣的：
- 用戶執行一個操作，比如敲擊鍵盤或單擊鼠標按鈕。
- 控制器接收輸入并觸發一個消息給模型。
- 模型根據消息修改其內容（刪除一行或更新購物車數量）。
- 視圖監視模型中的變更，并相應地更新用戶界面。
了解 MVC 模式的工作方式，可以使您的應用程序流動變得更簡單。 此外，由于代碼被分割成不同的塊，開發人員團隊能夠更輕松地協同工作，且不互相干擾。
Ember 如何執行 MVC
JavaScript 是一個靈活而強大的語言，但它也有不足之處。 它不提供那種使自己適合于 MVC 風格開發的開箱即用的功能。 因此 Ember 利用一批額外功能擴展了該基本語言。 在構建 Ember 應用程序時，您會使用四個主要部件： Application（應用程序）、Model（模型）、View（視圖）和 Controller（控制器）。 以下各節將回顧每個部件。
Application（應用程序）
每個 Ember 應用程序都需要一個 Ember.Application 實例。這是代碼其余所有部分的基礎，它提供有用的功能，以及名稱空間（對應用程序的其余部件進行分組的一種方式）。 定義一個 Ember 應用程序很簡單：
- Songs = Ember.Application.create({ mixmaster: 'Andy' });
該代碼定義一個名為 Songs 的應用程序，將其名為 mixmaster 的屬性設置為 Andy 。 您可以將應用程序的名稱改為您喜歡的任何名稱，但 Ember 要求變量的名稱以一個大寫字母開始，以便綁定的系統可以找到它。 在創建應用程序時還可以添加其他內置選項，并且您也可以添加任意的屬性或方法，但初學者用戶主要關心的可能是 ready() 方法。 該方法的工作方式與 jQuery 的 document.ready() 塊完全一樣，并且能夠通過以下方式實現：
- Songs = Ember.Application.create({ mixmaster: 'Andy', totalReviews: 0, ready: function(){ alert('Ember sings helloooooooooo!'); } });
Models（模型）
如果沒有數據，應用程序就沒有意義。 Ember 使用 Models 幫助開發人員以結構化的方式管理數據。 除了保存數據之外，Ember Models 也對其內部的數據進行建模。 換句話說，如果您想儲存有關 MP3 集合的信息，您的模型可能包含一個標題屬性、一個藝術家屬性和一個流派屬性等。 該模型可能看起來如下所示：
- Songs.Song = Ember.Object.extend({ title: null, artist: null, genre: null, listens: 0 });
關于這幾行代碼，還有幾件事情要注意。
- 您馬上就可以看到您的應用程序在使用的名稱空間。 Songs 是應用程序的名稱，而 Song 是模型的名稱。
- 當擴展對象時，您是在為此模型的未來實例創建藍圖。 因為這是 主 因為這是主對象，所有歌曲將以它為基礎，所以它使用一個大寫字母。 這些命名約定使得您在將來可以更輕松地分辨正在使用的對象類型。
- 在創建模型時，您可以為每個屬性提供默認值。 title、 artist 和 genre 屬性可在以后填寫，所以被標記為 null （或無）。 listens 屬性默認為 0 ，并且它的值將在您聽音樂收藏時增加。
現在， Song 模型已到位，您可以添加第一首歌曲。 您使用了 extend 來初始化 Song 模型，但您將使用 create 來添加它的一個實例。 下面是它的樣子：
- mySong = Song.create({ title: 'Son of the Morning', artist: 'Oh, Sleeper', genre: 'Screamo' });
請注意，變量沒有以一個大寫字母開始，那是因為它是 Song 模型的一個實例。 新的歌曲也不在 Songs 名稱空間中。 您將幾乎不再需要在您的應用程序中創建模型的實例。 您這樣做當然沒問題，但一般來說，您會將模型的每個實例放置在相近對象的較大集合中，比如 ArrayController（后面會詳細介紹）。
#p#
Views（視圖）
在一個 Ember 應用程序或任何 MVC 風格的應用程序中，View（視圖）是用戶可以看見并與之交互的組件。 通過將原始 HTML 直接添加到頁面，可以定義一個內聯模板。 該模板將被包含在 script 標記中。 您可以將它添加到頁面中您希望顯示內容的任意位置。
- <script type="text/x-handlebars"> Hello <b>{{Songs.mixmaster}}</b> </script>
請注意， script 標記的類型是 text/x-handlebars 。 這使 Ember 在加載頁面時，有一些東西可以抓取。 Ember 自動準備在這個腳本標記內所包含的任何 HTML，以便在您的應用程序中使用。 將這幾行代碼放在您的應用程序中，就會顯示以下文本：
- Hello <b>Andy</b>
在繼續之前，先深入了解一下。 在您的瀏覽器中，右鍵單擊粗體文本，并使用瀏覽器的開發工具檢查它。 您可能注意到一些額外的元素。 為了知道在一個基本的屬性發生變化時，要更新哪一部分的 HTML，Handlebars 將插入帶有唯一 ID 的標記元素；例如：
- <b> <script id="metamorph-0-start" type="text/x-placeholder"></script> Andy <script id="metamorph-0-end" type="text/x-placeholder"></script> </b>
您可以直接在 JavaScript 中定義一個視圖，然后使用視圖輔助程序將它顯示到頁面中。 Ember 有通用視圖，可以在應用程序中創建簡單的 div 標記，但它還配有預打包的一組視圖，用于構建基本控件，比如文本輸入框、復選框和選擇列表。 從在 JavaScript 文件中定義簡單的 TextArea 視圖開始。
- Songs.ReviewTextArea = Ember.TextArea.extend({ placeholder: 'Enter your review' });
然后，通過引用包含該視圖的變量的、以單詞 view 開頭的路徑，將它顯示到頁面。 運行下面的代碼，在您的瀏覽器中顯示 TextArea 字段，其占位符文本為 "Enter your review"。 您也可以在定義中指定 rows 和 cols 作為額外的屬性。
- <script type="text/x-handlebars"> {{view Songs.ReviewTextArea}} </script>
Handlebars
現在，您可能想知道代碼中的 {{ 和 }} 表示什么，我們正好可以談談 Handlebars，也稱為 mustaches。 稍微思考一下，您就會明白它們為什么被稱為 Handlebars pard'ner。 Handlebars 是一個模板引擎，讓開發人員可以混合原始 HTML 和 Handlebars 表達式 ，生成渲染的HTML。 表達式以 {{ 開始，并以 }} 結束。 如前所述，所有模板必須放在類型為 text/x-handlebars 的 script 標記內。
默認情況下，handlebars 內所包含的任何值據稱都會綁定到它的值。 這意味著，如果因為應用程序內的一些其他操作使該值發生變化，顯示給用戶的值也將更新。 考慮以下代碼：
- <script type="text/x-handlebars"> My songs have {{Songs.totalReviews}} reviews. </script>
第一次初始化您的應用程序時，用戶將看到以下文本。
- My songs have 0 reviews.
但是，憑借數據綁定，隨著因更新 Songs.totalReviews 而添加的更多評論，該值將實時改變。
Handlebars 還通過使用 {{#if}} 和 {{else}} . 支持流控制。 這些元素使您可以根據應用程序中的值實現模板的 條件化 。 您可以修改前面的示例，在沒有任何評論時向用戶顯示另一條消息：
- <script type="text/x-handlebars"> {{#if Songs.totalReviews}} Read all my reviews! {{else}} There are no reviews right now. {{/if}} </script>
如果在應用程序的生命周期中的任意時點， Songs.totalReviews 值發生了變化，該視圖將更新并顯示另一部分的消息。 值得注意的還有， # 和 / 符號只是為了告訴 Handlebars，這個特定的視圖輔助程序有一個閉合標記。
Controllers（控制器）
此前，Model（模型）被定義為一種使開發人員能夠管理數據的方法。 這沒錯，但這只是一種狹義的定義。 一個模型只包含與單一事物有關的數據；例如，一首歌曲（但不是多首歌曲）或一個人（但不是多個人）。 當您想管理多個相同類型的數據塊時，您需要一個 Controller（控制器）。 有了 Ember，您可以使用 ArrayController 來管理多組歌曲、人員、部件或任何東西。 每個 ArrayController 都有內置的 content 屬性，用于存儲數據。 該數據可以是簡單的字符串，也可以是復雜的值，比如數組或對象。 此外，ArrayController 中包含的函數可以用于與在 ArrayController 中所包含的數據進行交互。 您的 Song 集合的 ArrayController 看起來會是什么樣呢？
- Songs.songsController = Ember.ArrayController.create({ content: [], init: function(){ // create an instance of the Song model var song = Songs.Song.create({ title: 'Son of the Morning', artist: 'Oh, Sleeper', genre: 'Screamo' }); this.pushObject(song); } });
init 函數不是必需的，但它很方便，因為 songsController 一旦就緒，就會觸發 init 函數。 它可以用來將現有數據填充到控制器，在本例中，您將使用它來將一首歌曲添加到控制器中，以演示 Ember 的數據綁定。 添加之前的 ArrayController 定義和以下內聯模板，并在您的瀏覽器中運行代碼：
- <script type="text/x-handlebars"> {{#each Songs.songsController}} <h3>{{title}}</h3> <p>{{artist}} - {{genre}}</p> {{/each}} </script>
Handlebars each 輔助程序收到一組數據的路徑，然后對它進行循環。 與控制器中每一項分別匹配的各個 each 塊中的一切都將顯示在頁面上。 請注意，您沒有提供直接訪問內容數組的路徑，因為就 Ember 而言，控制器 就是 數組。所生成的 HTML 輸出如下所示：
- <h3>Son of the Morning</h3> <p>Oh, Sleeper - Screamo</p>
全面整合： EmberTweets
此時，您應該已較好地了解了 Ember 是什么，以及它可以做什么。您也應該了解使 Ember 實現其能力的每個組件： Application（應用程序）、Model（模型）、View（視圖）和 Controller（控制器）。 現在是時候應用這些知識了，以編寫一個真實可用的應用程序。 您將跳過行業標準的 "todo 應用程序" ，并轉移到對許多人來說更親近和熟悉的： Twitter。 在本教程的剩余部分，您將構建一個 Twitter 時間軸查看器。 在編寫任何代碼之前， 看看最終結果可能會有幫助。
#p#
創建樣板文件
使用本文開頭的樣板 HTML 頁面，您將首先構建基礎 HTML。 復制下面的代碼，并粘貼到一個名為 index.html 的新 HTML 文件中。您需要引用在本文的示例文件中的 CSS 文件。 示例文件還包含了這個項目的起點，也可以供您隨時使用。
- <!doctype html> <html>
- <head>
- <title>Tweets</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" href="styles.css">
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.6.min.js"></script>
- <script src="app.js"></script>
- </head>
- <body>
- <script type="text/x-handlebars">
- <div id="frm"> <b>Load Tweets for: </b> </div>
- <div id="content">
- <div id="recent">
- <h3>Recent Users</h3>
- </div>
- <div id="tweets"> <h3>Tweets</h3> </div>
- </div>
- </script>
- </body>
- </html>
您可以看到這個應用程序有三個部分： 一個輸入字段，允許用戶輸入一個 Twitter 用戶名；時間軸查看器，顯示所選 Twitter 用戶的 tweet；以及最新的用戶列表，它將存儲以前的搜索。
搜索框將出現在頁面頂部，最新的用戶在左側的欄中，而 tweet 本身將占據頁面右側的絕大部分版面。
下一步，創建名為 app.js 的另一個文件，并添加以下內容。 這些注釋可以幫助您保持代碼的條理性。 在您的瀏覽器中加載此頁面，并確保沒有任何錯誤。
- /************************** * Application **************************/
- /************************** * Models **************************/
- /************************** * Views **************************/
- /************************** * Controllers **************************/
請注意，此行使用的不是 Ember.Application，而是 Em.Application。在可能要使用 "Em" 任何地方，您都可以使用 "Ember"，Ember 團隊通過加入這個方便的快捷方式，減少了要輸入的字數。
接下來，您將添加 TextInput 視圖和提交按鈕。 直接在標記為 "Views" 的注釋塊下面，放入以下代碼：
- App = Em.Application.create();
請注意，此行使用的不是 Ember.Application，而是 Em.Application。在可能要使用 "Em" 任何地方，您都可以使用 "Ember"，Ember 團隊通過加入這個方便的快捷方式，減少了要輸入的字數。
接下來，您將添加 TextInput 視圖和提交按鈕。 直接在標記為 "Views" 的注釋塊下面，放入以下代碼：
- App.SearchTextField = Em.TextField.extend({ insertNewline: function(){ App.tweetsController.loadTweets(); } });
此塊從使用 App 名稱空間開始，然后擴展 Ember 的其中一個預打包的視圖 TextField。 除了在 Views 內允許任意屬性和函數之外，Ember 也提供了內置的輔助函數。 那就是 insertNewLine() 函數；每當光標在輸入框中，并且用戶在鍵盤上按 Enter/Return 鍵時，就會執行該函數。
創建模板塊
現在已定義了 TextField View，您將要添加相應的視圖輔助代碼到 HTML 文件中。 切換到 index.html 并在顯示為 "Load Tweets for" 的行后面直接添加以下代碼。 請記住， {{ 和 }} 內的任何代碼都是模板，并且將被 Ember 用于輸出數據。 此外，任何以單詞 view 開始的模板指的都是已經在您的 JavaScript 代碼中定義過的視圖。
- {{view App.SearchTextField placeholder="Twitter username" valueBinding="App.tweetsController.username"}} <button {{action "loadTweets" target="App.tweetsController"}}>Go!</button>
這部分的模板包含一個視圖輔助程序，以及一個帶有 {{action}} 輔助程序的按鈕標記。 TextField View SearchTextField 以占位符文本開始，占位符文本是內置在 HTML5 文本輸入字段中的一個屬性。 如果該字段為空， placeholder 屬性中的文本將被放進輸入字段。 當有人開始輸入時，該值將消失。 Ember 使開發人員可以在其內置視圖內使用任何 HTML 5 標準屬性。
第二個屬性突出顯示 Ember 數據綁定的能力。 Ember 使用一組約定來幫助它確定您想完成什么。 視圖（一個模板或一個 JavaScript 文件中的視圖）中以單詞 "Binding" （注意大寫字母）結尾的任何屬性，自動為它前面的屬性設置綁定。 在本例中，Ember 將 App.tweetsController.username 的值綁定到輸入字段的 value 屬性。 每當變量的內容發生變化，輸入字段中的值將自動更新，反之亦然。
{{action}} 使得更易于將功能添加到輸入驅動的元素。 它有兩個選項： 操作名稱和目標。 兩者綜合起來，形成一個 "路徑" ，指向 Ember 對象中所包含的函數。 在上面按鈕的示例中， "路徑" 將是 App.tweetsController.loadTweets() ，當用戶在文本字段內按 Enter 鍵時，也會調用相同的函數。 在您的瀏覽器中加載 index.html，并單擊提交按鈕，或在輸入字段內按 Enter 鍵。 如果您查看瀏覽器控制臺，您就會看到一個錯誤。 這是因為還沒有定義 App.tweetsController 。
準備 Tweet 存儲對象
現在是定義 App.tweetsController 的好時機。 在 app.js 中的 Controllers 注釋塊后面添加以下代碼。您應該已經熟悉以下代碼。 名稱空間、ArrayController、內容數組 —— 一切都在。 但這次您將會添加一個任意屬性 ( username ) 和一個函數 ( loadTweets )。 在添加 ArrayController 之后，重新加載您的瀏覽器。 在輸入框中輸入一個單詞，然后單擊按鈕。 您會得到一個提示框，回顯您所鍵入的單詞。 您可以隨時刪除提示行。 您還將看到一個錯誤，表明尚未定義 addUser 方法。
- App.tweetsController = Em.ArrayController.create({ c
- ontent: [], username: '', loadTweets: function() {
- var me = this; var username = me.get("username");
- alert(username);
- if ( username ) {
- var url = 'http://api.twitter.com/1/statuses/user_timeline.json' url += '?screen_name=%@&callback=?'.fmt(me.get("username"));
- // push username to recent user array App.recentUsersController.addUser(username);
- } } });
仔細看看 loadTweets 函數的定義；它有一些陌生的代碼。 第一行為函數的其余部分設置一個 范圍 。 根據定義，范圍或 this 對于所有 Ember 對象來說都是當前函數，在本例中是 App.tweetsController 。 但是，在本教程中，稍后您可以將更多功能添加到 loadTweets 函數。 現在設置當前范圍，有助于 Ember 理解您正在使用的上下文。
如前所述，Ember 提供了許多輔助函數，使編寫應用程序變得更容易，這些函數包括 get() 和 set() 。 這兩個函數內置在每個 Ember 對象中，并提供對任何屬性或函數的快速訪問。 下一行使用當前對象 App.tweetsController 的范圍，然后調用 get() 函數，將您希望獲取其值的屬性的名稱傳遞進去。 您可能會好奇，在開始時要使用的用戶名的值從哪里來。 請記住，Ember 的數據綁定是雙向的。 這意味著，一旦您在輸入字段中鍵入了一個值，該輸入字段視圖的 valueBinding 屬性就會用一個值更新 App.tweetsController 對象。
檢索到用戶名后，會運行一個測試，以確保它不是空的。 此時 if 塊內只有兩個語句，但這在以后會更改。 第一個語句為一個用戶將 URL 設置到 Twitter 的 JSON 文件。 您可能沒有馬上注意到這里有什么特殊之處，但仔細再看看，您就會發現末尾的 %@ 和 .fmt() 。 .fmt() 函數執行一個方便的字符串替換，使用 %@ 作為標記。 由于應用程序的設計要求存儲搜索列表，因此您必須以某種方式存儲您的搜索字詞。 最后一行執行該函數，將用戶名的值推送到 App.recentUsersController ArrayController。 因為該對象尚未存在，所以運行代碼將產生一個錯誤。
#p#
存儲之前的搜索
在下面這一節中，您將創建用于存儲最近搜索的對象。 使用以下代碼并將它添加到 App.tweetsController 對象后面。
- App.recentUsersController = Em.ArrayController.create({
- content: [], addUser: function(name) {
- if ( this.contains(name) )
- this.removeObject(name);
- this.pushObject(name); }, removeUser: function(view)
- { this.removeObject(view.context); }, searchAgain:
- function(view){ App.tweetsController.set('username', view.context); App.tweetsController.loadTweets(); },
- reverse: function(){ return this.toArray().reverse(); }.property('@each') });
您已經熟悉了如何創建 ArrayController 和添加一個空的內容數組，但該對象有一些新的元素，它們以 addUser 函數開始。 這將使用名稱為 contains() 的內置 Ember 函數檢查現有數組 ( this )。 如果它找到一個結果，它會使用 ArrayController 的函數 removeObject() 刪除該結果。 與該函數相反，有一個名為 pushObject() 的函數，它用于將單獨的對象添加到內容數組。 這兩個函數都有處理多個對象的復數版本： pushObjects() 和 removeObjects() 。 此代碼在添加搜索詞之前首先刪除現有搜索詞，那么相同的搜索詞就不會被多次顯示。 既然您已經知道如何從內容數組中刪除一個對象， removeUser() 函數中唯一的新元素就是參數。 當使用 {{action}} 輔助程序調用一個函數時，Ember 隱式傳遞一個引用給當前視圖。 在 App.tweetsController 的示例中，視圖有一個上下文，這基本上是當前被遍歷的項。 該上下文用于從數組中刪除選定的項。
searchAgain() 函數也將當前視圖接收為一個參數。 當用戶單擊之前搜索過的字詞，該函數會用選定的用戶名填充 App.tweetsController.username ，然后觸發 loadTweets() 函數，為前面的搜索提供一個單擊視圖。
默認情況下，Ember 按升序將內容顯示到頁面。 數組索引 1 是第一個，數組索引 2 是第二個，依次類推。 此應用程序的設計要求按降序顯示最近的搜索。 這意味著該數組必須被逆轉。 雖然這不是內置函數，但您可以看到要添加它是多么容易。 Reverse() 首先使用 Ember toArray() 函數將 Ember 內容數組轉換成一個普通的數組，逆轉它，然后返回它。 使得該函數可以被用作一個數據源的，是在末尾添加的 property() 函數。 property() 函數使用一個指定函數所要求的以逗號分隔的屬性列表。 在本例中， property() 函數隱式地使用內容數組本身，使用 @each 依賴鍵對該數組內每個元素進行尋址。 在下一節中，您將看到如何實施 reverse() 函數。
顯示之前的搜索
現在，您已存儲了之前的搜索，是時候將它們顯示在頁面上。 復制以下模板，并將它添加到標簽為 Recent Users 的 h3 標記后面。
- <ol> {{#each App.recentUsersController.reverse}} <li> <a href="#" title="view again" {{action "searchAgain" target="App.recentUsersController"}}>{{this}}</a> - <a href="#" title="remove" {{action "removeUser" target="App.recentUsersController"}}>X</a> </li> {{/each}} </ol>
現在，您應該已經熟悉所有這些代碼。 each 塊指向內容數組，它內部所包含的 HTML 將被應用到 App.recentUsersController 變量中的每一項。 不必顯式指向內容數組，但在本例中，該代碼指向 reverse 函數，它以反序提供數據。 {{action}} 輔助程序讓用戶單擊每個錨標記，并觸發指定的函數。 可能不太熟悉的唯一一個元素是 {{this}} 。 當遍歷內容數組時，Ember 在 {{this}} 變量中保存對當前索引的引用。 因為每一項的值都只是一個字符串，您可以使用 {{this}} 直接輸出當前項的值。 單擊 Twitter 用戶名，將再次加載該用戶的 tweet，而單擊這些 tweet 的名稱則將從 recentUsersController 刪除它們。
加載 tweet
保存搜索詞沒問題了，但實際執行搜索又如何呢？ 接下來，您將添加從 Twitter 檢索 JSON 包的片段，并將它顯示到頁面。 使用以下 Ember Model 并直接將它添加到標簽為 Model 的注釋塊后面。 請記住，Ember Model 是它們將包含的數據是一個藍圖。
- App.Tweet = Em.Object.extend({ avatar: null, screen_name: null, text: null, date: null });
在 app.js 中，找到顯示為 App.recentUsersController.addUser(username); 的代碼行；并在它后面直接添加以下代碼：
- $.getJSON(url,function(data){ me.set('content', []); $(data).each(function(index,value){ var t = App.Tweet.create({ avatar: value.user.profile_image_url, screen_name: value.user.screen_name, text: value.text, date: value.created_at }); me.pushObject(t); }) });
如果您以前使用過 jQuery，您可能已經使用過 .get() 函數來檢索數據。 .getJSON() 函數做同樣的事情，只是它將 JSON 包視作一個結果。 此外，它使用返回的 JSON 字符串，并將它轉換成可執行的 JavaScript 代碼。 數據被檢索到之后，內容數組被清空，刪除所有現有的 tweet。 下一行提取數據包，并將它封裝在一個 jQuery 對象中，因此 .each() 方法可以循環所生成的 Tweets。 在 each 塊中，使用數據填充了 Tweet Model 的一個副本，然后將其推送到 ArrayController。
最后，您需要將以下顯示代碼添加到 index.html。直接復制并粘貼它到標簽為 Tweets 的 h3 標記后面。
- <ul> {{#each App.tweetsController}} <li> <img {{bindAttr src="avatar"}} /> <span>{{date}}</span> <h3>{{screen_name}}</h3> <p>{{text}}</p> </li> {{/each}} </ul>
Ember 使用純 {{Handlebars}} 可以很容易地輸出數據到頁面，但有一個問題。 還記得 Ember 如何在腳本標記中包裝輸出的值嗎？ 當您使用 HTML 屬性時，這并不是一個選項。 所以 Ember 提供 {{bindAttr}} 輔助程序。 在這個輔助程序內放置的任何屬性都將如常輸出，但仍保留綁定。 繼續進行操作，現在運行您的應用程序。 輸入一個用戶名，會看到 Tweets 出現。
下一步閱讀方向
在本文中，您學習了 Ember.js 功能的基礎知識。 您也學習了 Ember 如何使用其Models、Views、Controllers，當然還有 Application 對象實施 MVC。 您使用 Handlebars 通過視圖輔助程序和操作輔助程序創建了模板。 您學習了如何使用 Models 創建數據的藍圖，使用 Controllers 將該數據存儲在集合集，并使用 Views 將數據顯示到頁面。 最后，您使用了 Ember 來構建一個具有數據綁定、計算屬性和自動更新模板的完整應用程序。 您的母親將為您感到自豪！
原文鏈接：http://www.adobe.com/cn/devnet/html5/articles/flame-on-a-beginners-guide-to-emberjs.html
