Ember Octane 注销按钮消失答案

【问题标题】：Ember Octane Logout button disappearsEmber Octane 注销按钮消失
【发布时间】：2020-04-03 06:30:42
【问题描述】：

我正在升级到 Ember Octane，并修改了模板 HBS 以调用组件 JS。当我使用 Ember Classic 时，Logout 按钮存在并且可以使用。但是，当我转换为 Octane 时，注销按钮就会消失。 o_O

在模板 HBS 上显示注销按钮的正确方法是什么？注意：我没有 HBS 组件文件。这在 Ember Octane 中是必需的吗？

经典模板 HBS sn-p:

<li><a href="#" onclick={{action "logout"}}>Logout</a></li>

辛烷值模板 HBS sn-p:

<li><a href="#" onclick={{on "submit" this.logout}}>Logout</a></li>

Octane 组件 JS（适用于经典模板，但不适用于 Octane 模板）：

import Component from '@ember/component';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';

export default class Navigation extends Component {    

    @service session
    @service currentClient

    @action
    logout(ev) {

        ev.preventDefault();

            this.session.invalidate();
    }
}

【问题讨论】：

标签： ember.js

【解决方案1】：

这里的问题是 on 修饰符的不当使用。 on 修饰符必须用于元素空间，而在您的 sn-p 中，on 修饰符用作帮助器。

应该像这样使用：

<button {{on "click" this.logout}}> Logout </button>

这意味着，我们要求框架为 click 事件注册提供的函数 this.logout。

而不为：

<button onclick={{on "click" this.logout}}> Logout </button>

This guide 应该有助于从经典事件处理迁移到最新的 Octane 方式。

【讨论】：