Emberjs-comp-wrap-cont-comp
提供:Dev Guides
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サーバーを実行します。次の出力が表示されます-
あなたがボタンをクリックすると、_compFunc()_関数がトリガーを取得し、さらに次の出力を表示します-