EmberJS-コンポーネントでのコンテンツのラッピング

テンプレートを使用して、コンポーネントでコンテンツをラップできます。 \ {\ {my-component}}と呼ばれる1つのコンポーネントがあるとします。次のように、別のテンプレートでプロパティを渡すことでコンポーネントにラップできます-

{{my-component title = title action = "funcName"}}

コンポーネントデータをラップされたコンテンツと共有できます。詳細については、次のリンクをクリックしてください：/emberjs/comp_share_wrap_cont_comp [link]。

例

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

_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"}}/><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サーバーを実行します。次の出力が表示されます-

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

あなたがボタンをクリックすると、_compFunc（）_関数がトリガーを取得し、さらに次の出力を表示します-

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

Emberjs-comp-wrap-cont-comp

EmberJS-コンポーネントでのコンテンツのラッピング

例

出力