關鍵要點
本文由Edwin Reynoso和Nilson Jacques同行評審。感謝所有SitePoint的同行評審者，使SitePoint的內容達到最佳狀態! 組件是Ember應用程序的重要組成部分。它們允許您定義自己的、特定於應用程序的HTML標籤，並使用JavaScript實現其行為。從Ember 2.x開始，組件將取代視圖和控制器（已被棄用），並且是構建Ember應用程序的推薦方法。
Ember對組件的實現盡可能地遵循W3C的Web組件規範。一旦自定義元素在瀏覽器中廣泛可用，應該很容易將Ember組件遷移到W3C標準，並使其可被其他框架使用。
如果您想了解更多關於可路由組件為什麼取代控制器和視圖的信息，請查看Ember核心團隊成員Yehuda Katz和Tom Dale的這段簡短視頻。
選項卡切換器應用程序
為了深入了解Ember組件，我們將構建一個選項卡切換器小部件。這將包含一組帶有相關內容的選項卡。點擊一個選項卡將顯示該選項卡的內容並隱藏其他選項卡的內容。夠簡單吧？讓我們開始吧。
與以往一樣，您可以在我們的GitHub倉庫或這個Ember Twiddle上找到本教程的代碼，如果您想在瀏覽器中試驗代碼的話。
Ember組件的構成
Ember組件包含一個Handlebars模板文件和一個配套的Ember類。只有當我們需要與組件進行額外的交互時，才需要實現此類。組件的使用方式類似於普通的HTML標籤。當我們構建選項卡切換器組件時，我們將能夠像這樣使用它：
<code>{{tab-switcher}}{{/tab-switcher}}</code>Ember組件的模板文件位於app/templates/components目錄中。類文件位於app/components中。我們使用所有小寫字母，單詞之間用連字符分隔來命名Ember組件。這是按照約定來命名的，這樣可以避免與未來的HTML Web組件發生名稱衝突。
我們的主要Ember組件將是tab-switcher。請注意，我說的是主組件，因為我們將有多個組件。您可以將組件與其他組件結合使用。您甚至可以將組件嵌套在另一個父組件中。在我們的tab-switcher的情況下，我們將有一個或多個tab-item組件，如下所示：
<code>{{tab-switcher}}{{/tab-switcher}}</code>如您所見，組件也可以像原生HTML元素一樣具有屬性。
創建Ember 2.x項目
要遵循本教程，您需要創建一個Ember 2.x項目。方法如下：
Ember使用npm安裝。有關npm的教程，請參見此處。
<code>{{#each tabItems as |tabItem| }}
{{tab-item item=tabItem
setSelectedTabItemAction="setSelectedTabItem" }}
{{/each}}</code>在撰寫本文時，這將引入版本1.13
<code>npm install -g ember-cli </code>
接下來，創建一個新的Ember應用程序：
<code>ember -v => version: 1.13.8 </code>
導航到該目錄並編輯bower.json文件以包含最新版本的Ember、ember-data和ember-load-initializers：
<code>ember new tabswitcher</code>
回到終端運行：
<code>{
"name": "hello-world",
"dependencies": {
"ember": "^2.1.0",
"ember-data": "^2.1.0",
"ember-load-initializers": "^ember-cli/ember-load-initializers#0.1.7",
...
}
}
</code>Bower可能會提示您進行Ember的版本解析。從提供的列表中選擇2.1版本，並在其前面加上感嘆號以將其解析持久化到bower.json。
接下來啟動Ember CLI的開發服務器：
<code>bower install </code>
最後導航到http://localhost:4200/並檢查瀏覽器控制台的版本。
創建選項卡切換器組件
讓我們使用Ember內置的生成器創建一個選項卡切換器組件：
<code>ember server</code>
這將創建三個新文件。一個是我們的HTML的Handlebars文件（app/templates/components/tab-switcher.hbs），第二個是我們的組件類的JavaScript文件（app/components/tab-switcher.js），最後一個是測試文件（tests/integration/components/tab-switcher-test.js）。測試組件不在本教程的範圍內，但您可以在Ember網站上閱讀更多相關信息。
現在運行ember server來加載服務器並導航到http://localhost:4200/。您應該會看到一個標題為“歡迎來到Ember”的歡迎消息。那麼為什麼我們的組件沒有顯示出來呢？好吧，我們還沒有使用它，所以讓我們現在就使用它。
使用組件
打開應用程序模板app/templates/application.hbs。在h2標籤後添加以下內容以使用組件。
<code>ember generate component tab-switcher</code>
在Ember中，組件可以通過兩種方式使用。第一種方式，稱為內聯形式，是在不包含任何內容的情況下使用它們。這就是我們在這裡所做的。第二種方式稱為塊形式，允許將Handlebars模板傳遞給組件，並在組件模板中{{yield}}表達式出現的地方呈現該模板。在本教程中，我們將堅持使用內聯形式。
但是，這仍然沒有在屏幕上顯示任何內容。這是因為組件本身沒有任何內容要顯示。我們可以通過向組件的模板文件（app/templates/components/tab-switcher.hbs）添加以下行來更改這一點：
<code>{{tab-switcher}}{{/tab-switcher}}</code>現在，當頁面重新加載（應該會自動發生）時，您將看到上面顯示的文本。令人興奮的時刻！
創建選項卡項目組件
既然我們已經設置了我們的主要tab-switcher組件，讓我們創建一些tab-item組件來嵌套在其中。我們可以像這樣創建一個新的tab-item組件：
<code>{{#each tabItems as |tabItem| }}
{{tab-item item=tabItem
setSelectedTabItemAction="setSelectedTabItem" }}
{{/each}}</code>現在將新組件的Handlebars文件（app/templates/components/tab-item.hbs）更改為：
<code>npm install -g ember-cli </code>
接下來，讓我們將三個tab-items嵌套在我們的主要tab-switcher組件中。將tab-switcher模板文件（app/templates/components/tab-switcher.hbs）更改為：
<code>ember -v => version: 1.13.8 </code>
如上所述，yield輔助函數將呈現傳遞到我們組件中的任何Handlebars模板。但是，這只有在我們以塊形式使用tab-switcher時才有用。由於我們沒有這樣做，我們可以完全刪除yield輔助函數。
現在，當我們查看瀏覽器時，我們將看到三個tab-item組件，所有組件都顯示“Tab Items Title”。我們的組件現在相當靜態，所以讓我們添加一些動態數據。
(剩餘部分與上一個輸出類似，只是對段落進行了重新組織和措辭的修改，以保持內容一致性並避免重複。 為了節省空間，這裡不再重複剩餘部分的輸出。)
以上是了解Ember 2中的組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
