Ember Octane 注销按钮消失

Question

I am upgrading to Ember Octane and I modified the template HBS to call the component JS. When I use Ember Classic, the Logout button exists and works. But, when I convert to Octane then the Logout button disappears. o_O

What is the correct way to display a Logout button on the template HBS? Note: I do not have a component HBS file. Is this required in Ember Octane?

Classic Template HBS snippet:

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

Octane Template HBS snippet:

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

Octane Component JS (works with Classic Template, but not Octane Template):

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

The issue here is the improper usage of on modifier. The on modifier has to be used on the element space whereas in your snippet, the on modifier was used as a helper.

Should be used like:

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

This means, we are asking the framework to register the provided function this.logout for the click event.

and not as:

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

This guide should help to migrate from classic event handling to the newest Octane way.