CODEWITHSUNDEEP
ember.js
Abuelo
Abuelo

Reputation: 209

Event handling in EmberJS components using {{#event}} blocks

I've been working on a UI in Ember and I am having difficulty implementing some of the event handling as described on the documentation here

I have a section of a nav bar I need to highlight on hover. The nav bar is made up of ember-bootstrap components.

    {{#bs-navbar type="dark" backgroundColor="primary" as |navbar|}}
{{navbar.toggle}}
<div class="container-fluid" style="padding-left:50px;padding-right:50px; ">
    <a class="navbar-brand" href="#"><img style="max-width:250px; margin-top: -12px;margin-bottom: -12px" src="/assets/images/logo_white_3x.png"></a>
    {{#navbar.content}}
        {{#navbar.nav as |nav|}}
            {{#nav.item class="highlight-active"}}
                {{#nav.link-to "index"}}LIVE{{/nav.link-to}}
            {{/nav.item}}
        {{/navbar.nav}}
    {{/navbar.content}}
    <div class="navbar-nav mr-left">
        {{#navbar.content}}
            {{#navbar.nav as |nav|}}
                {{#nav.dropdown class="{{isHover}}" as |dd|}}
                    {{#dd.toggle }}Link<span class="caret"></span>{{/dd.toggle}}
                        {{#dd.menu as |ddm|}}
                            {{#ddm.item}}{{#ddm.link-to "index"}}Link{{/ddm.link-to}}{{/ddm.item}}
                            {{#ddm.item}}{{#ddm.link-to "cau.all"}}Link{{/ddm.link-to}}{{/ddm.item}}
                        {{/dd.menu}}
                {{/nav.dropdown}}
                {{#nav.item}}
                    {{#nav.link-to "index"}}Current User: <b>MICKEY MOUSE</b>{{/nav.link-to}}
                {{/nav.item}}
            {{/navbar.nav}}
        {{/navbar.content}}
    </div>
</div>
{{/bs-navbar}}

To accomplish this I tried to use one of the block events described n the documentation:

 //template
 {{#hover}}
  <h1>link</h1>
 {{/hover}}

//component
export default Component.extend({
  hover() {
    alert('hovered')
  },
  actions: {
      //actions here
  }
});

This produces the following error: hover not found, and the catch-all block handler didn't handle it

I thought it might be because the name of the even must be hyphenated so changed it accordingly. This produced a no component or helper by that name error.

Copying and pasting the same text from the guide produces the same errors which suggests there is something more fundamental I am not understanding.

Can anyone shed any light?

Upvotes: 1

Views: 255

Answers (2)

valerysntx
valerysntx

Reputation: 526

Try use an action for the mouseEnter event, e.g. <div mouseEnter={{action "showCaution"}}>

Another way to preserve native event behaviors and use an action, is to assign a (closure) action to an inline event handler.

The action is simply a function defined on the actions hash of a component. Since the action is assigned to an inline handler, the function definition can define the event object as its first parameter.

actions: {
  showCaution(event){
    // Only when assigning the action to an inline handler, the event object
    // is passed to the action as the first parameter.
 }
}

Upvotes: 2

mistahenry
mistahenry

Reputation: 8724

First off, if you need to highlight a navbar on hover, you should be doing this with css. 

.someClass:hover: {
  //apply highlight style
}

As for what's wrong with what you're doing in general, go back and look at those linked docs again. There's no event that ember handles called hover. What you're looking for is mouseEnter and mouseLeave. Check this twiddle to see an example:

export default Component.extend({
  mouseEnter(){
    this.set('hovering', true); 
  },
  mouseLeave(){
    this.set('hovering', false);
  }
});

Where we only show the passed block on hover

Hover here -> 
{{#if hovering}}
{{yield}}
{{/if}}

Upvotes: 2

Related Questions