javascript - Propagate hover event in ember - Stack Overflow

admin管理员组

文章数量:1391735

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

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Dec 13, 2013 at 22:09 opsbopsb 30.3k2121 gold badges9191 silver badges100100 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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...

本文标签： javascriptPropagate hover event in emberStack Overflow