Propagate hover event in ember

Asked By: Anonymous

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:

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

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

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

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

// templates/components/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.

Solution

Answered By: Anonymous

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

// components/evented-tag.js
export default Ember.Component.extend(
    function(){
        var definition = {
            template: Ember.Handlebars.compile('{{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/components/evented-tag.hbs
{{yield}}

and to use:

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

// components/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);
    }       
 }
});