灰烬组件在路线或控制器中调用动作 [英] Ember component call an action in a route or controller

问题描述

我有一个组件，其主要目的是显示一行项目。
每行都有一个删除按钮，可以删除一行。

I have a component the main purpose of which is to display a row of items. Every row has a delete button to make it possible to delete a row. How is possible to pass an action from a template to the component which will trigger an action in a router ?

以下是使用该组件的模板：

Here is the template using the component:

#templates/holiday-hours.hbs

{{#each model as |holidayHour|}}
  {{holiday-hour holiday=holidayHour shouldDisplayDeleteIcon=true}}
{{/each}}

这是组件模板：

# templates/components/holiday-hour.hbs
...
div class="col-sm-1">
    {{#if shouldDisplayDeleteIcon}}
    <button type="button" class="btn btn-danger btn-sm mt-1" {{action 'deleteHoliday' holiday}}>
      <span class="oi oi-trash"></span>
    </button>
    {{/if}}
</div>

我正在使用相同的组件来显示行并创建一个新项目（假日小时）。

I'm using the same component to display a row and to create a new item (holiday-hour).

我正在使用 ember 3.1.2

谢谢

推荐答案

由于您的问题不是提供有关路线操作等的足够/所有信息。长答案，简短说明，使用闭包功能。假设这是您的路线js文件 routes / holiday-hours.js

I will try to give a general answer because your question is not giving enough/all info regarding the route actions etc. Long answer short, using closure functions. Assuming this is your route js file routes/holiday-hours.js

import Route from '@ember/routing/route';

export default Route.extend({
    model(){ /*... some code */ },
    setupController(controller){
        this._super(controller);
        controller.set('actions', {
             passToComponent: function(param) { //.... function logic }
        })
    }
});

注意：在上面的代码段中，我使用的是 setupController 创建动作。或者，您可以将动作放在控制器文件中，否则直接在路由内的动作将引发错误。
所以我想从组件中调用操作 passToComponent 。这是要使它在组件内部可访问。

Note: in the above snippet, I'm using setupController to create actions. Alternatively, you can put the actions inside a controller file otherwise actions directly inside the route will throw an error. So I want the action passToComponent to be called from the component. This is what you do to make it accessible inside the component.

{{#each model as |holidayHour|}}   {{holiday-hour holiday=holidayHour shouldDisplayDeleteIcon=true callAction=(action 'passToComponent')} {{/each}}

现在，我们已将操作传递给组件，这是从组件调用它的方法。注意：我添加了一个参数，只是为了表明在组件中调用该参数时可以使用该参数。

Now we have passed the action to the component and here's how to call it from the component. Note: I have added a param just to show that it can take a param when called within the component.

import Component from '@ember/component';

export default Component.extend({
    actions: {
       deleteHoliday: ()=> {
         this.get('callAction')() /*Pass in any params in the brackets*/
       }
    }
});

您还将看到使用 sendAction 的演示是相当古老的，并且更多地充当事件总线，但效率不是很高。从此文章

You will also see demonstrations using sendAction which is rather old and acts more of an event bus that is not very efficient. Read more from this article

这篇关于灰烬组件在路线或控制器中调用动作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！