Question

我有一个组件，其主要目的是显示一行项目。每行都有一个删除按钮，可以删除一行。如何将模板中的操作传递给将在路由器中触发操作的组件？

以下是使用组件的模板：

# 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>

以下是组件模板：

holiday-hour

我使用相同的组件来显示一行并创建一个新项目（import pandas as pd df = pd.read_excel("Energy Indicators.xls", header=None, footer=None) c_df = df.copy() c_df = c_df.iloc[18:245, 2:] c_df = c_df.rename(columns={2: 'Country', 3: 'Energy Supply', 4:'Energy Supply per Capita', 5:'% Renewable'}) c_df['Energy Supply'] = c_df['Energy Supply'].apply(lambda x: x*1000000) print(c_df) c_df = c_df.loc[c_df['Country'] == ('Korea, Rep.')] = 'South Korea'）。

我使用 ember 3.1.2

谢谢

Answer 1

我会尝试给出一般答案，因为你的问题没有给出关于路线动作等的足够/所有信息。长答案简短，使用闭包功能。假设这是您的路径js文件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。这是您可以在组件内部访问它的方法。

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

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

import Component from '@ember/component';

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

您还将看到使用sendAction的演示，这种演示相当陈旧，并且更像是一个效率不高的事件总线。阅读此article

的更多内容

Answer 2

您必须将操作从组件发送到路径。执行此操作的主要方法是向组件添加将“操作”“发送”到父级的操作。发送操作后，您必须通过将操作作为参数传递，告诉组件要触发的路由上的操作。以下是如何执行此操作的示例。

组件js

# components/holiday-hour.js
...
actions: {
   deleteHoliday(){
      this.sendAction('deleteHoliday');
   }
}

路线模板

#templates/holiday-hours.hbs
...
{{#each model as |holidayHour|}}
  {{holiday-hour holiday=holidayHour shouldDisplayDeleteIcon=true deleteHoliday='deleteHoliday'}}
{{/each}}

路线js

#routes/holiday-hours.js
...
actions: {
    deleteHoliday(){
        //code to delete holiday
    }
}

Ember组件在路径或控制器中调用操作

2 个答案: