EmberJS-ラップされたコンテンツとコンポーネントデータを共有する

説明

コンポーネントデータをラップされたコンテンツと共有できます。 \ {\ {my-component}}という1つのコンポーネントがあるとします。このコンポーネントに対して、投稿を記述するためのスタイルプロパティを提供できます。次のように書くことができます-

{{#my-component editStyle="markdown-style"}}

コンポーネントにはハッシュが提供され、テンプレートに提供されます。 _editStyle_は、コンポーネントヘルパーへの引数として使用できます。

例

以下の例では、コンポーネントデータをラップされたコンテンツと共有することを指定しています。 _app/components/_の下に定義される_post-action_という名前のコンポーネントを作成します。

_post-action.js_ファイルを開き、以下のコードを追加します-

import Ember from 'ember';

export default Ember.Component.extend({
   actions: {
      compFunc: function () {
         this.set('title', "finddevguides...");
        //this method sends the specified action
         this.sendAction();
      }
   }
});

今、以下のコードでコンポーネントテンプレートファイル_post-action.hbs_を開きます-

<input type="button" value="Click me" {{action "compFunc" bodyStyle="compact-style"}}/><br/>
//wrapping the 'title' property value
<p><b>Title:</b> {{title}}</p>
{{yield}}

_index.hbs_ファイルを開き、以下のコードを追加します。

<b>Click the button to check title property value</b>
{{post-action title=title action="compFunc"}}
{{outlet}}

出力

エンバーサーバーを実行すると、以下の出力が得られます-

Ember.jsコンポーネント共有ラッピングコンテンツ

ボタンをクリックすると、_compFunc（）_関数がトリガーを取得し、以下の出力を表示します-

Ember.jsコンポーネント共有ラッピングコンテンツ

Emberjs-comp-share-wrap-cont-comp

EmberJS-ラップされたコンテンツとコンポーネントデータを共有する

説明

例

出力