點燃聖火！ Ember.js 的初學者指南

時間 2019-11-20

標籤點燃 ember.js ember 初學者指南欄目 JavaScript 简体版

原文原文鏈接

如今，處處均可以看到複雜的 JavaScript 應用程序。因爲這些應用程序變得愈來愈複雜，一長串的 jQuery 回調語句，或者經過應用程序在各個點執行不一樣的函數調用，這些都變得沒法再讓人接受。這致使了 JavaScript 開發人員瞭解到傳統的軟件程序員已經知道了幾十年的問題：組織和效率很是重要，而且能夠對應用程序的性能是否優異產生重大影響。css

實現組織和效率的其中一個最經常使用的架構模式，被稱爲 Model View Controller （縮寫爲 MVC）。這種模式鼓勵開發人員將其應用程序的不一樣部分分割爲更易於管理的塊。您沒必要使用一個函數直接調用數據庫，您能夠建立了一個 Model（模型）來爲您管理數據庫。您沒必要使用一個佈滿輸出和邏輯語句的 HTML文件，一個簡單的模板或 View（視圖）就能夠您簡化顯示代碼。最後，Controller（控制器）管理您的應用程序的流，幫助各類零散的部件更高效地互相溝通。在您的應用程序中使用這個模式，能夠更輕鬆地增長新的功能。html

做爲最近爆發的基於 Internet 的軟件開發的一部分，出現了一堆使人眼花繚亂的 MVC 框架，好比 Ember.js、Backbone.js、Knockout.js、Spine.js、Batman.js 和 Angular.js。一方面是初級和中級開發人員，另外一方面是骨灰級程序員，以 JavaScript 編寫並針對 JavaScript 開發而設計的這些庫補充了這二者之間的空白。它們提供多種特性和功能，根據開發人員的需求知足技能水平各異的不一樣開發人員。jquery

在本教程中，您將經過構建一個可用的 Twitter 時間軸查看器，更熟悉 Ember.js。git

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（內容交付網絡）進行更新。若是用戶在早些時候訪問須要這些文件的其餘網站時已經下載過這些文件，這會加快用戶的頁面加載速度。github

 
     <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 年已經出現，自那時以來，該模式已經出現一些不一樣的變體。最多見的流程一般是這樣的：web

用戶執行一個操做，好比敲擊鍵盤或單擊鼠標按鈕。
控制器接收輸入並觸發一個消息給模型。
模型根據消息修改其內容（刪除一行或更新購物車數量）。
視圖監視模型中的變動，並相應地更新用戶界面。

瞭解 MVC 模式的工做方式，可使您的應用程序流動變得更簡單。此外，因爲代碼被分割成不一樣的塊，開發人員團隊可以更輕鬆地協同工做，且不互相干擾。ajax

Ember 如何執行 MVC

JavaScript 是一個靈活而強大的語言，但它也有不足之處。它不提供那種使本身適合於 MVC 風格開發的開箱即用的功能。所以 Ember 利用一批額外功能擴展了該基本語言。在構建 Ember 應用程序時，您會使用四個主要部件： Application（應用程序）、Model（模型）、View（視圖）和 Controller（控制器）。如下各節將回顧每一個部件。數據庫

Application（應用程序）

每一個 Ember 應用程序都須要一個 Ember.Application 實例。這是代碼其他全部部分的基礎，它提供有用的功能，以及名稱空間（對應用程序的其他部件進行分組的一種方式）。定義一個 Ember 應用程序很簡單：json

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（後面會詳細介紹）。

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 時間軸查看器。在編寫任何代碼以前，看看最終結果可能會有幫助。

建立樣板文件

使用本文開頭的樣板 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 **************************/  
    

應用程序初始化

您須要作的第一件事，是初始化您的應用程序。直接在標記爲 Application 的註釋塊下面，放入如下代碼：

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({ content: [], 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。由於該對象還沒有存在，因此運行代碼將產生一個錯誤。

存儲以前的搜索

在下面這一節中，您將建立用於存儲最近搜索的對象。使用如下代碼並將它添加到 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 來構建一個具備數據綁定、計算屬性和自動更新模板的完整應用程序。您的母親將爲您感到自豪！

有關 Ember 的更多讀物，請查看如下的一些連接：