1. WIKI教程
2. 学习EmberJS
3. 处理操作完成和传递参数(Handling Action Completion and Passing Arguments)

处理操作完成和传递参数(Handling Action Completion and Passing Arguments)

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

语法 (Syntax)

该行动可以实施为 -

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")}}

例子 (Example)

下面给出的示例指定处理操作完成并在您的应用程序中传递参数。 使用名称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}} 

输出 (Output)

运行ember服务器; 你会收到以下输出 -

双击表单后，它将显示表单并在其中输入详细信息。 然后双击“保存”按钮以保存详细信息 -

现在您将看到保存的详细信息，如下面的屏幕截图所示 -