關(guān)鍵要點(diǎn)

• Ember組件是Ember應(yīng)用的核心，允許開(kāi)發(fā)者定義自定義的、特定于應(yīng)用的HTML標(biāo)簽，并使用JavaScript實(shí)現(xiàn)其行為。在Ember 2.x中，組件取代了視圖和控制器。
• Ember組件包含一個(gè)Handlebars模板文件和一個(gè)配套的Ember類。這些組件可以與其他組件一起使用，甚至可以嵌套在父組件中，并具有類似于原生HTML元素的屬性。
• 可以通過(guò)模型（表示應(yīng)用程序向用戶呈現(xiàn)的基礎(chǔ)數(shù)據(jù)的對(duì)象）向Ember應(yīng)用程序添加動(dòng)態(tài)數(shù)據(jù)。這允許創(chuàng)建交互式和動(dòng)態(tài)組件。
• 可以使用操作（發(fā)送到組件類的動(dòng)作）向組件添加用戶交互。這些操作可用于創(chuàng)建交互式元素，例如顯示不同內(nèi)容的可點(diǎn)擊選項(xiàng)卡。

本文由Edwin Reynoso和Nilson Jacques同行評(píng)審。感謝所有SitePoint的同行評(píng)審者，使SitePoint的內(nèi)容達(dá)到最佳狀態(tài)! 組件是Ember應(yīng)用程序的重要組成部分。它們?cè)试S您定義自己的、特定于應(yīng)用程序的HTML標(biāo)簽，并使用JavaScript實(shí)現(xiàn)其行為。從Ember 2.x開(kāi)始，組件將取代視圖和控制器（已被棄用），并且是構(gòu)建Ember應(yīng)用程序的推薦方法。

Ember對(duì)組件的實(shí)現(xiàn)盡可能地遵循W3C的Web組件規(guī)范。一旦自定義元素在瀏覽器中廣泛可用，應(yīng)該很容易將Ember組件遷移到W3C標(biāo)準(zhǔn)，并使其可被其他框架使用。

如果您想了解更多關(guān)于可路由組件為什么取代控制器和視圖的信息，請(qǐng)查看Ember核心團(tuán)隊(duì)成員Yehuda Katz和Tom Dale的這段簡(jiǎn)短視頻。

選項(xiàng)卡切換器應(yīng)用程序

為了深入了解Ember組件，我們將構(gòu)建一個(gè)選項(xiàng)卡切換器小部件。這將包含一組帶有相關(guān)內(nèi)容的選項(xiàng)卡。點(diǎn)擊一個(gè)選項(xiàng)卡將顯示該選項(xiàng)卡的內(nèi)容并隱藏其他選項(xiàng)卡的內(nèi)容。夠簡(jiǎn)單吧？讓我們開(kāi)始吧。

與以往一樣，您可以在我們的GitHub倉(cāng)庫(kù)或這個(gè)Ember Twiddle上找到本教程的代碼，如果您想在瀏覽器中試驗(yàn)代碼的話。

Ember組件的構(gòu)成

Ember組件包含一個(gè)Handlebars模板文件和一個(gè)配套的Ember類。只有當(dāng)我們需要與組件進(jìn)行額外的交互時(shí)，才需要實(shí)現(xiàn)此類。組件的使用方式類似于普通的HTML標(biāo)簽。當(dāng)我們構(gòu)建選項(xiàng)卡切換器組件時(shí)，我們將能夠像這樣使用它：

<code>{{tab-switcher}}{{/tab-switcher}}</code>

Ember組件的模板文件位于app/templates/components目錄中。類文件位于app/components中。我們使用所有小寫(xiě)字母，單詞之間用連字符分隔來(lái)命名Ember組件。這是按照約定來(lái)命名的，這樣可以避免與未來(lái)的HTML Web組件發(fā)生名稱沖突。

我們的主要Ember組件將是tab-switcher。請(qǐng)注意，我說(shuō)的是主組件，因?yàn)槲覀儗⒂卸鄠€(gè)組件。您可以將組件與其他組件結(jié)合使用。您甚至可以將組件嵌套在另一個(gè)父組件中。在我們的tab-switcher的情況下，我們將有一個(gè)或多個(gè)tab-item組件，如下所示：

<code>{{tab-switcher}}{{/tab-switcher}}</code>

如您所見(jiàn)，組件也可以像原生HTML元素一樣具有屬性。

創(chuàng)建Ember 2.x項(xiàng)目

要遵循本教程，您需要?jiǎng)?chuàng)建一個(gè)Ember 2.x項(xiàng)目。方法如下：

Ember使用npm安裝。有關(guān)npm的教程，請(qǐng)參見(jiàn)此處。

<code>{{#each tabItems as |tabItem| }}
  {{tab-item item=tabItem 
             setSelectedTabItemAction="setSelectedTabItem" }}
{{/each}}</code>

在撰寫(xiě)本文時(shí)，這將引入版本1.13

<code>npm install -g ember-cli
</code>

接下來(lái)，創(chuàng)建一個(gè)新的Ember應(yīng)用程序：

<code>ember -v
=> version: 1.13.8
</code>

導(dǎo)航到該目錄并編輯bower.json文件以包含最新版本的Ember、ember-data和ember-load-initializers：

<code>ember new tabswitcher</code>

回到終端運(yùn)行：

<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可能會(huì)提示您進(jìn)行Ember的版本解析。從提供的列表中選擇2.1版本，并在其前面加上感嘆號(hào)以將其解析持久化到bower.json。

接下來(lái)啟動(dòng)Ember CLI的開(kāi)發(fā)服務(wù)器：

<code>bower install
</code>

最后導(dǎo)航到http://localhost:4200/并檢查瀏覽器控制臺(tái)的版本。

創(chuàng)建選項(xiàng)卡切換器組件

讓我們使用Ember內(nèi)置的生成器創(chuàng)建一個(gè)選項(xiàng)卡切換器組件：

<code>ember server</code>

這將創(chuàng)建三個(gè)新文件。一個(gè)是我們的HTML的Handlebars文件（app/templates/components/tab-switcher.hbs），第二個(gè)是我們的組件類的JavaScript文件（app/components/tab-switcher.js），最后一個(gè)是測(cè)試文件（tests/integration/components/tab-switcher-test.js）。測(cè)試組件不在本教程的范圍內(nèi)，但您可以在Ember網(wǎng)站上閱讀更多相關(guān)信息。

現(xiàn)在運(yùn)行ember server來(lái)加載服務(wù)器并導(dǎo)航到http://localhost:4200/。您應(yīng)該會(huì)看到一個(gè)標(biāo)題為“歡迎來(lái)到Ember”的歡迎消息。那么為什么我們的組件沒(méi)有顯示出來(lái)呢？好吧，我們還沒(méi)有使用它，所以讓我們現(xiàn)在就使用它。

使用組件

打開(kāi)應(yīng)用程序模板app/templates/application.hbs。在h2標(biāo)簽后添加以下內(nèi)容以使用組件。

<code>ember generate component tab-switcher</code>

在Ember中，組件可以通過(guò)兩種方式使用。第一種方式，稱為內(nèi)聯(lián)形式，是在不包含任何內(nèi)容的情況下使用它們。這就是我們?cè)谶@里所做的。第二種方式稱為塊形式，允許將Handlebars模板傳遞給組件，并在組件模板中{{yield}}表達(dá)式出現(xiàn)的地方呈現(xiàn)該模板。在本教程中，我們將堅(jiān)持使用內(nèi)聯(lián)形式。

但是，這仍然沒(méi)有在屏幕上顯示任何內(nèi)容。這是因?yàn)榻M件本身沒(méi)有任何內(nèi)容要顯示。我們可以通過(guò)向組件的模板文件（app/templates/components/tab-switcher.hbs）添加以下行來(lái)更改這一點(diǎn)：

<code>{{tab-switcher}}{{/tab-switcher}}</code>

現(xiàn)在，當(dāng)頁(yè)面重新加載（應(yīng)該會(huì)自動(dòng)發(fā)生）時(shí)，您將看到上面顯示的文本。令人興奮的時(shí)刻！

創(chuàng)建選項(xiàng)卡項(xiàng)目組件

既然我們已經(jīng)設(shè)置了我們的主要tab-switcher組件，讓我們創(chuàng)建一些tab-item組件來(lái)嵌套在其中。我們可以像這樣創(chuàng)建一個(gè)新的tab-item組件：

<code>{{#each tabItems as |tabItem| }}
  {{tab-item item=tabItem 
             setSelectedTabItemAction="setSelectedTabItem" }}
{{/each}}</code>

現(xiàn)在將新組件的Handlebars文件（app/templates/components/tab-item.hbs）更改為：

<code>npm install -g ember-cli
</code>

接下來(lái)，讓我們將三個(gè)tab-items嵌套在我們的主要tab-switcher組件中。將tab-switcher模板文件（app/templates/components/tab-switcher.hbs）更改為：

<code>ember -v
=> version: 1.13.8
</code>

如上所述，yield輔助函數(shù)將呈現(xiàn)傳遞到我們組件中的任何Handlebars模板。但是，這只有在我們以塊形式使用tab-switcher時(shí)才有用。由于我們沒(méi)有這樣做，我們可以完全刪除yield輔助函數(shù)。

現(xiàn)在，當(dāng)我們查看瀏覽器時(shí)，我們將看到三個(gè)tab-item組件，所有組件都顯示“Tab Items Title”。我們的組件現(xiàn)在相當(dāng)靜態(tài)，所以讓我們添加一些動(dòng)態(tài)數(shù)據(jù)。

(剩余部分與上一個(gè)輸出類似，只是對(duì)段落進(jìn)行了重新組織和措辭的修改，以保持內(nèi)容一致性并避免重復(fù)。 為了節(jié)省空間，這里不再重復(fù)剩余部分的輸出。)

以上是了解Ember 2中的組件的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！