Ember Octane 注銷按鈕消失

Question

我正在升級到 Ember Octane，並修改了模板 HBS 以調用組件 JS。 當我使用 Ember Classic 時，Logout 按鈕存在並且有效。 但是，當我轉換為 Octane 時，注銷按鈕就會消失。 o_O

在模板 HBS 上顯示注銷按鈕的正確方法是什么？ 注意：我沒有 HBS 組件文件。 這在 Ember Octane 中是必需的嗎？

經典模板 HBS 片段：

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

Octane 模板 HBS 代碼段：

<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();
    }
}

Answer 1

這里的問題是on修飾符的不當使用。 on修飾符必須用於元素空間，而在您的代碼段中， on修飾符用作幫助器。

應該像這樣使用：

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

這意味着，我們要求框架為click事件注冊提供的 function this.logout 。

而不是：

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

本指南應該有助於從經典事件處理遷移到最新的 Octane 方式。