EmberJS - 处理操作完成和传递参数

组件可以通过返回承诺来处理操作的完成，并且可以使用操作助手将参数传递给组件。

语法

操作可以实现为 −

import Ember from 'ember';

export default Ember.Component.extend ({
   actions: {
      action_name() {
         //代码在这里
      }
   }
});

参数可以作为 − 传递给组件

{{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 文件并添加以下代码 −