处理操作完成和传递参数(Handling Action Completion and Passing Arguments)
优质
小牛编辑
129浏览
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服务器; 你会收到以下输出 -
双击表单后,它将显示表单并在其中输入详细信息。 然后双击“保存”按钮以保存详细信息 -
现在您将看到保存的详细信息,如下面的屏幕截图所示 -