时间戳

首页 > 解决方案 > Ember 组件调用路由或控制器中的操作

ember.js - Ember 组件调用路由或控制器中的操作

问题描述

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

这是使用该组件的模板：

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

我正在使用相同的组件来显示一行并创建一个新项目 ( holiday-hour)。

我正在使用ember 3.1.2

谢谢

标签： ember.js

解决方案

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

组件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
    }
}

推荐阅读