当前位置: 首页 > 文档资料 > EmberJS 入门教程 >

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

优质
小牛编辑
128浏览
2023-12-01

组件可以通过返回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服务器; 你会收到以下输出 -

Ember.js组件操作完成并传递参数

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

Ember.js组件操作完成并传递参数

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

Ember.js组件操作完成并传递参数