CODEWITHSUNDEEP
aureliadom-events
weagle08
weagle08

Reputation: 1964

Binding Aurelia event handler prevents default action

I have links in my menu that go to anchors in my page. I'd like the menu to collapse when one of the links are clicked and have the default action still occur. It seems when I bind an aurelia event handler the default action never occurs (link does not navigate). How can I bind an aurelia event handler as well as have the default action occur for an anchor tag?

i.e:

HTML

<ul class="${navClass}">
    <li><a href="#about" click.trigger="_toggleMenu()"><i class="fa fa-pencil" style="color: #FFFF00;"></i><span>About</span></a></li>        
</ul>

JS

_toggleMenu() {
    if(this.navClass == 'nav') {
        this.navClass += ' expand';
    } else {
        this.navClass = 'nav';
    }
}

Upvotes: 2

Views: 504

Answers (1)

Erik Lieben
Erik Lieben

Reputation: 1247

use click.delegate="_toggleMenu()" (also works with trigger, but delegate is preferred, see https://github.com/aurelia/binding/blob/master/doc/article/en-US/binding-delegate-vs-trigger.md)

Then return true to let the action bubble:

_toggleMenu() {
    if(this.navClass == 'nav') {
        this.navClass += ' expand';
    } else {
        this.navClass = 'nav';
    }

    return true;
}

Upvotes: 6

Related Questions