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コンポーネントアクションの完了と引数の受け渡し

これで、下のスクリーンショットに示すように、保存された詳細が表示されます-

Ember.jsコンポーネントアクションの完了と引数の受け渡し

Emberjs-comp-action-compl-pass-args

EmberJS-アクション完了の処理と引数の受け渡し

構文

例

出力

目次