了解Ember 2中的組件

關鍵要點

• Ember組件是Ember應用的核心，允許開發者定義自定義的、特定於應用的HTML標籤，並使用JavaScript實現其行為。在Ember 2.x中，組件取代了視圖和控制器。
• Ember組件包含一個Handlebars模板文件和一個配套的Ember類。這些組件可以與其他組件一起使用，甚至可以嵌套在父組件中，並具有類似於原生HTML元素的屬性。
• 可以通過模型（表示應用程序向用戶呈現的基礎數據的對象）向Ember應用程序添加動態數據。這允許創建交互式和動態組件。
• 可以使用操作（發送到組件類的動作）向組件添加用戶交互。這些操作可用於創建交互式元素，例如顯示不同內容的可點擊選項卡。

本文由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中文網其他相關文章！