在余烬中传播悬停事件

Propagate hover event in ember

本文关键字：事件 悬停 传播 余烬中      更新时间：2023-09-26

我有一个列表，我想检测用户何时将鼠标悬停在其中的li上。问题是mouseEnter似乎不会传播。目前我正在使用这个：

// 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>

这很有效，但我真的觉得我错过了一些启示，还有什么更地道的方法可以做呢？

更新

我还应该提到，除了悬停事件之外，我还想捕捉点击，这意味着不可能使用动作助手。

{{#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.com/uQopETU/2/edit

好的，这是一个更通用的解决方案，用于在父视图中触发操作并在上下文中传递。

// 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}}

和使用：

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

Ahhhh，您可以在应用程序中注册自定义事件。我所要做的就是添加：

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

由于mouseover向上传播视图，我可以在父视图中处理它：

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

好的，现在尝试另一种方法，这次我创建了一个自定义组件，用于列表中的每个项目。

export default Ember.Component.extend({
    tagName: "a",
    template: Ember.Handlebars.compile('{{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()
});

然后在主组件中，我为已发送的操作注册处理程序：

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

这是有效的，但感觉这里仍然有一些问题，特别是sendAction方法上的间接（调用另一个属性）似乎很冗长。为什么不直接将操作的名称传递到sendAction中呢？看起来我最终会创建大量的组件来调度事件。也许可以创建一个通用链接，拦截所有事件并将其与上下文一起发送。。。

相关文章：