Ember.js 余烬动作助手

我的ember应用程序中的操作助手有问题。我有一个UL列表中的项目列表。列表中可以有不同的数字项。项目应在鼠标悬停时响应。第一个解决方案是在列表中的每个项目（LI）上添加一个鼠标输入操作，如：

<ul>
 {{#each data key="id" as |item|}}
   <li {{action "mouseOverLi" on="mouseEnter"}}>  {{item.description}}</li>
{{/each}}
</ul>

---

将动作绑定到每个元素是一个完美的解决方案，也是Ember中的标准处理方式：

<ul>
   {{#each data key="id" as |item|}}
     <li {{action "mouseOverLi" on="mouseEnter"}}>
       {{item.description}}
     </li>
   {{/each}}
</ul>

我怀疑您的反对意见是我们附加了很多事件处理程序，但这是一个老问题，不应该成为一个问题，除非您确实有一个奇怪的列表项数量。在这种情况下，性能问题首先是您有那么多列表项

另外，就性能而言，jQuery实际上不会对

mouseenter

做出反应，因为

mouseenter

只在

ul

上触发一次，而在子元素之间移动时不会触发。那么它是如何工作的呢？在jQuery中，

mouseenter

是来自

mouseover

的合成事件，请参阅：

因此，如果您坚持认为必须拥有，您基本上会像使用其他方法一样使用jQuery。因为我们在做一些非标准的事情：

App.HoverListComponent = Ember.Component.extend({
  tagName: "ul",
  didInsertElement: function(){
    this.$().on("mouseenter", "li", function(){
      console.log("Whatever you want to do");
    });
  }
});

然后在模板中：

{{#hover-list}}
  {{#each data key="id" as |item|}}
    <li>
      {{item.description}}
    </li>
  {{/each}}
{{/hover-list}}

---

但基本上我的原意是，当使用Ember.js方式执行Ember.js时，不要像jQuery那样执行，否则您将得到非常笨拙的代码。

“这不是一个好的解决方案。”为什么？您的代码是否存在性能问题？过早优化是万恶之源。感谢您的回复。这只是一个示例，因为我发现自己多次需要action helper中的“filter”参数来加快在action handler函数中编写它的速度。我已经用“didInsertElement”函数完成了，我只是想也许有更好的解决方案。现在我很清楚我没有做错什么。再次感谢！

mouseOverLi: function(item){
  item.set("description", "Changed to something different!");
}

App.HoverListComponent = Ember.Component.extend({
  tagName: "ul",
  didInsertElement: function(){
    this.$().on("mouseenter", "li", function(){
      console.log("Whatever you want to do");
    });
  }
});

{{#hover-list}}
  {{#each data key="id" as |item|}}
    <li>
      {{item.description}}
    </li>
  {{/each}}
{{/hover-list}}

App.HoverListComponent = Ember.Component.extend({
  tagName: "ul",
  mouseMove: function(e){
    // @todo Find the closest 'li' if the LI has 
    // other elements in it.
    // @todo Only fire once per element.
    if(e.toElement.tagName !== 'LI'){
      return;
    }
    $(e.toElement).css("color", "red");
  }
});