Ember 2のコンポーネントの理解

キーポイント

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

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

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

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

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

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

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

エンバーコンポーネントの構成

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

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

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

メインエンバーコンポーネントはタブスイッチャーです。複数のコンポーネントがあるため、主なコンポーネントについて話していることに注意してください。他のコンポーネントと組み合わせてコンポーネントを使用できます。別の親コンポーネントにコンポーネントをネストすることもできます。タブスイッチャーの場合、以下に示すように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/に移動し、ブラウザコンソールのバージョンを確認します。

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

<code>bower install
</code>

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

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

<code>ember server</code>

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

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

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

しかし、これはまだ画面に何も表示されません。これは、コンポーネント自体に表示するものがないためです。これを変更できます。コンポーネントのテンプレートファイルに次の行を追加できます（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>

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

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

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

以上がEmber 2のコンポーネントの理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。