Emberjs-comp-action-compl-pass-args
提供:Dev Guides
EmberJS-アクション完了の処理と引数の受け渡し
コンポーネントはプロミスを返すことでアクションの完了を処理でき、アクションヘルパーを使用して引数をコンポーネントに渡すことができます。
構文
アクションは次のように実装できます-
import Ember from 'ember';
export default Ember.Component.extend ({
actions: {
action_name() {
//code here
}
}
});
引数は次のようにコンポーネントに渡すことができます-
{{component_name text = "text-here" action-helper = (action "action_name" "args")}}
例
以下の例は、アクションの完了を処理し、アプリケーションで引数を渡すことを指定しています。 _ember-actions_という名前のコンポーネントを作成し、次のコードで_app/components/_の下に作成されたコンポーネントテンプレートファイル_ember-actions.js_を開きます-
import Ember from 'ember';
export default Ember.Component.extend ({
doubleClick: function() {
this.toggleProperty('isEditing');
},
isEditing: false
});
_app/templates/components/_の下に作成された_ember-actions.hbs_ファイルを開き、次のコードを入力します-
{{#if isEditing}}
<p>Title: {{input value = title}}</p>
<p>url: {{input value = url}}</p>
<p>Double click on the save button to save information.</p>
<button>Save</button>
{{else}}
<p>Double click on the form to enter details:</p>
<p>Title: {{title}}</p>
<p>url: {{url}}</p>
{{/if}}
{{yield}}
_application.hbs_ファイルを作成し、次のコードを追加します-
{{ember-actions}}
{{outlet}}
出力
emberサーバーを実行します。次の出力が表示されます-
Ember.jsコンポーネントアクションの完了と引数の受け渡し
フォームをダブルクリックすると、フォームが表示され、フォームに詳細が入力されます。 次に、[保存]ボタンをダブルクリックして詳細を保存します-
Ember.jsコンポーネントアクションの完了と引数の受け渡し
これで、下のスクリーンショットに示すように、保存された詳細が表示されます-