キーポイント

• EmberコンポーネントはEmberアプリケーションのコアであり、開発者がJavaScriptを使用してカスタム、アプリケーション固有のHTMLタグを定義し、動作を?qū)g裝できるようにします。 Ember 2.xでは、コンポーネントはビューとコントローラーを置き換えます。
• Emberコンポーネントには、ハンドルバーテンプレートファイルと一致するエンバークラスが含まれています。これらのコンポーネントは他のコンポーネントで使用でき、親コンポーネントにネストし、ネイティブHTML要素と同様の特性を持つことさえできます。
• 動的データは、モデル（アプリケーションがユーザーに提示する基礎(chǔ)となるデータを表すオブジェクト）を介してEmberアプリケーションに追加できます。これにより、インタラクティブで動的なコンポーネントを作成できます。
• ユーザーインタラクションは、アクション（コンポーネントクラスに送信されたアクション）を使用してコンポーネントに追加できます。これらのアクションを使用して、異なるコンテンツを表示するクリック可能なタブなど、インタラクティブな要素を作成できます。

この記事は、エドウィン?レイノソとニルソン?ジャックによって査読されました。 SetePointのコンテンツを最高の狀態(tài)にするためのすべてのピアレビュアーに感謝します！それらは、あなたがあなた自身のアプリケーション固有のHTMLタグを定義し、JavaScriptを使用してその動作を?qū)g裝することを可能にします。 Ember 2.xから始めて、コンポーネントはビューとコントローラー（非推奨）を置き換え、Emberアプリケーションを構(gòu)築するための推奨方法です。

Emberのコンポーネントの実裝は、W3C Webコンポーネントの仕様にできるだけ追跡します。ブラウザでカスタム要素が広く利用可能になったら、EmberコンポーネントをW3C標(biāo)準(zhǔn)に移行し、他のフレームワークで使用できるようにすることができます。

ルーティング可能なコンポーネントがコントローラーとビューを置き換える理由について詳しく知りたい場合は、Ember CoreチームのメンバーであるYehuda KatzとTom Daleによるこの短いビデオをご覧ください。

タブスイッチャーアプリケーション

Emberコンポーネントに関する洞察を得るために、Tab Switcherウィジェットを構(gòu)築します。これには、関連するコンテンツを備えたタブのセットが含まれます。タブをクリックすると、そのタブの內(nèi)容が表示され、他のタブの內(nèi)容が非表示になります。簡単ですか？始めましょう。

いつものように、ブラウザのコードを試したい場合は、GitHubリポジトリまたはこのEmber Twiddleでこのチュートリアルのコードを見つけることができます。

エンバーコンポーネントの構(gòu)成

Emberコンポーネントには、ハンドルバーテンプレートファイルと一致するエンバークラスが含まれています。このクラスは、コンポーネントとの追加のやり取りが必要な場合にのみ実裝する必要があります。コンポーネントは、通常のHTMLタグと同様の方法で使用されます。タブスイッチャーコンポーネントを構(gòu)築すると、次のように使用できます。

Emberコンポーネントのテンプレートファイルは、アプリ/テンプレート/コンポーネントディレクトリにあります。クラスファイルはアプリ/コンポーネントにあります。エンバーコンポーネントに名前を付けるために、単語間でハイフンで區(qū)切られたすべての小文字を使用します。これは慣習(xí)に従って名前が付けられており、將來のHTML Webコンポーネントとの名前の競合を回避できます。

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

メインエンバーコンポーネントはタブスイッチャーです。複數(shù)のコンポーネントがあるため、主なコンポーネントについて話していることに注意してください。他のコンポーネントと組み合わせてコンポーネントを使用できます。別の親コンポーネントにコンポーネントをネストすることもできます。タブスイッチャーの場合、以下に示すように1つ以上のタブ項目コンポーネントがあります。

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

ご覧のとおり、コンポーネントにはネイティブHTML要素などのプロパティがあることもあります。

ember 2.xプロジェクトを作成を作成します このチュートリアルに従うには、Ember 2.xプロジェクトを作成する必要があります。この方法は次のとおりです

EmberはNPMを使用してインストールされています。 NPMのチュートリアルについては、こちらをご覧ください。

この記事を書いている時點で、これによりバージョン1.13

が紹介されます。

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

次に、新しいEmberアプリケーションを作成します：

このディレクトリに移動し、bower.jsonファイルを編集して、Ember、Ember-Data、およびEmber-load-Initializersの最新バージョンを含むように編集します。

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

ターミナルに戻って実行：

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

bowerは、エンバーのバージョンを解析するように促す場合があります。提供されたリストからバージョン2.1を選択し、bower.jsonに解像度を維持するために感嘆符を付けます。

Ember CLIの開発サーバーを開始する

<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>

最後にhttp：// localhost：4200/に移動し、ブラウザコンソールのバージョンを確認(rèn)します。

タブスイッチャーコンポーネントを作成します Emberの內(nèi)蔵ジェネレーターを使用してTab Switcherコンポーネントを作成しましょう：

<code>bower install
</code>

これにより、3つの新しいファイルが作成されます。 1つはHTMLハンドルバーファイル（App/Templates/Components/Tab-Switcher.hbs）、2つ目はコンポーネントクラスJavaScriptファイル（App/Components/Tab-Switcher.js）で、最後はテストファイル（テスト/テスト/統(tǒng)合/コンポーネント/TAB-SWITCHER-TEST.js）。テストコンポーネントはこのチュートリアルの範(fàn)囲內(nèi)ではありませんが、Ember Webサイトで詳細(xì)をお読みください。

サーバーをロードしてhttp：// localhost：4200/に移動するためにEmberサーバーを?qū)g行します。 「Emberへようこそ」というタイトルのウェルカムメッセージが表示されます。では、なぜコンポーネントが表示されないのですか？さて、私たちはまだそれを使用していないので、今すぐ使用しましょう。 コンポーネントを使用して

<code>ember server</code>

Application Template App/Templates/Application.hbsを開きます。 H2タグの後に以下を追加して、コンポーネントを使用します。

Emberでは、コンポーネントは2つの方法で使用できます。インライン形式

と呼ばれる最初の方法は、コンテンツなしでそれらを使用することです。それが私たちがここでやっていることです。 2番目のメソッドは、ブロックフォームと呼ばれます。これにより、ハンドルバーテンプレートをコンポーネントに渡すことができ、{{evel}}式がコンポーネントテンプレートに表示されるテンプレートをレンダリングできます。このチュートリアルでは、インライン形式に固執(zhí)します。

しかし、これはまだ畫面に何も表示されません。これは、コンポーネント自體に表示するものがないためです。これを変更できます。コンポーネントのテンプレートファイルに次の行を追加できます（App/Templates/Components/Tab-Switcher.hbs）：

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

今、ページがリロードされると（自動的に発生するはずです）、上記のテキストが表示されます。エキサイティングな瞬間！

タブプロジェクトコンポーネントを作成

メインのタブスイッチャーコンポーネントをセットアップしたので、ネストするためにいくつかのタブ項目コンポーネントを作成しましょう。このような新しいタブ項目コンポーネントを作成できます：

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

新しいコンポーネントのハンドルバーファイル（app/templates/components/tab-item.hbs）を次のように変更します。

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

次に、メインのタブスイッチャーコンポーネントに3つのタブ項目をネストしましょう。 Tab-Switcherテンプレートファイル（App/Templates/Components/Tab-Switcher.hbs）を

に変更します

上記のように、

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

>収量ヘルパー関數(shù)は、コンポーネントに渡されるハンドルバーテンプレートをレンダリングします。ただし、これは、ブロック形式のタブスイッチャーを使用する場合にのみ便利です。これを行わなかったため、収量ヘルパー機能を完全に削除できます。

ここで、ブラウザを見ると、3つのタブ項目コンポーネントが表示されます。これらはすべて「タブアイテムのタイトル」を表示します。コンポーネントは非常に靜的になったので、動的なデータをいくつか追加しましょう。

（殘りは以前の出力に似ていますが、段落が再編成され、コンテンツの一貫性を維持し、重複を避けるために文言があります。スペースを節(jié)約するために、殘りの部分の出力はここで繰り返されません。）

以上がEmber 2のコンポーネントの理解の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。