I have a list and I want to detect when the user hovers over an li within it. Problem is mouseEnter doesn't seem to propagate. At the moment I'm resorting to using this:

// ponents/hover-pad.js
export default Ember.Component.extend({
    template: Em.Handlebarspile('{{yield}}'),

    mouseEnter: function(){
        this.sendAction("action", this.get("ctx"));
    },

    action: function(){
        return "hover";
    }.property()
});

// ponents/project-picker.js
export default Ember.Component.extend({
    actions: {
        hover: function(ctx){
            console.log("caught propagated hover");
        }
    }
})

// templates/ponents/project-picker/hbs
<ul>
    {{#each project in projects}}
    <li>{{#hover-pad ctx="project"}}</li>
    {{/each}}
</ul>

This works but I really feel like I'm missing some ember enlightenment, what would a more idiomatic may to do it?

Update

I should also mention that I want to capture clicks in addition to the hover event which means that it's not possible to use the action helper.

I have a list and I want to detect when the user hovers over an li within it. Problem is mouseEnter doesn't seem to propagate. At the moment I'm resorting to using this:

// ponents/hover-pad.js
export default Ember.Component.extend({
    template: Em.Handlebars.pile('{{yield}}'),

    mouseEnter: function(){
        this.sendAction("action", this.get("ctx"));
    },

    action: function(){
        return "hover";
    }.property()
});

// ponents/project-picker.js
export default Ember.Component.extend({
    actions: {
        hover: function(ctx){
            console.log("caught propagated hover");
        }
    }
})

// templates/ponents/project-picker/hbs
<ul>
    {{#each project in projects}}
    <li>{{#hover-pad ctx="project"}}</li>
    {{/each}}
</ul>

This works but I really feel like I'm missing some ember enlightenment, what would a more idiomatic may to do it?

Update

I should also mention that I want to capture clicks in addition to the hover event which means that it's not possible to use the action helper.

• javascript
• ember.js

4 Answers 4

{{#view App.ClickHoverView contextBinding=item}}
   {{item}}
{{/view}}

App.ClickHoverView = Em.View.extend({
  tagName:'li',
  click:function(){
     this.get('controller').send('click', this.get('context'));
  },
  mouseEnter:function(){
     this.get('controller').send('hover', this.get('context'));
  }
});

http://emberjs.jsbin./uQopETU/2/edit

Ok this is a more generic solution, for triggering actions in a parent view and passing in a context.

// ponents/evented-tag.js
export default Ember.Component.extend(
    function(){
        var definition = {
            template: Ember.Handlebars.pile('{{yield}}'),
        };

        var events = Ember.A(["touchStart", "touchMove", "touchEnd", "touchCancel", "keyDown", "keyUp", "keyPress", "mouseDown", "mouseUp", "contextMenu", "click", "doubleClick", "mouseMove", "focusIn", "focusOut", "mouseEnter", "mouseLeave", "submit", "change", "dragStart", "drag", "dragEnter", "dragLeave", "dragOver", "drop", "dragEnd"]);

        var self = this;
        events.forEach(function(event){
            definition[event] = function(){
                var handlerName = "_" + event;
                if(this.get(handlerName)){
                    this.sendAction(handlerName, this.get("param"));    
                }
            }
        });

        return definition;
    }()
);

// templates/ponents/evented-tag.hbs
{{yield}}

and to use:

// templates/ponents/project_picker.hbs
<ul>
    {{#each project in projects}}
        {{#evented-tag tagName="li" param=project _mouseEnter="projectHovered", _click="projectClicked"}}
            {{project.name}}
        {{/evented-tag}}
    {{/each}}
</ul>

// ponents/project_picker.js
export default Ember.Component.extend({
 actions: {
    projectClicked: function(project){
        console.log("projectClicked");
        console.log(project);
    },

    projectHovered: function(project){
        console.log("projectHovered");
        console.log(project);
    }       
 }
});

Ahhhh, you can register custom events with the App. All I had to do was add:

var App = Ember.Application.extend({
  customEvents: {
    "mouseover": "mouseOver"
  }
});

and because mouseover propagates up the views I can handle it in the parent view:

// ponents/project-picker.js
export default Ember.Component.extend({
    mouseOver: function(ctx){
        console.log("caught propagated hover");
    }
})

OK, trying another approach now, this time I create a custom ponent which is used for each item in the list.

export default Ember.Component.extend({
    tagName: "a",
    template: Ember.Handlebars.pile('{{project.name}}'),

    click: function(){
        this.sendAction('projectClicked', this.get("project"));
    },

    mouseOver: function(){
        this.sendAction('projectHovered', this.get("project"));
    },

    projectClicked: function(){
        return "projectClicked";
    }.property(),

    projectHovered: function(){
        return "projectHovered";
    }.property()
});

then in the main ponent I register handlers for the actions that have been sent:

// ponents/project-picker.js
export default Ember.Component.extend({
    actions: {
        projectClicked: function(project){
            console.log("caught propagated hover");
        },
        projectHovered: function(project){
            console.log("caught propagated hover");
        } 
    }
})

This works but it still feels like there's a fair bit of cruft here, in particular the indirection on the sendAction method (calling through to another property) seems very long winded. Why not just pass the name of the action into sendAction directly? It also seems like I'm going to end up creating an awful lot of ponents to just dispatch events. Maybe it's possible to create a generic link that intercepts all events and sends them with the context...