Question

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

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

这个解决方案正在运行，但是现在每个LI标签都有一个动作，这不是一个好的解决方案。那么还有其他解决方案。最好的方法是在UL标签中添加动作助手，并在LI子标签上添加过滤器。

换句话说，如何在Ember的动作助手中转换这个jQuery代码片段：

$("ul").on("mouseover","li",function(){
    // some code.
});

Answer 1

将动作绑定到每个元素是一个非常好的解决方案，也是在Ember处理它的标准方法：

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

它还为您提供了能够传递ember对象而不是传递DOM节点的额外好处。例如：

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

然后你处理的地方：

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

我怀疑你的反对意见是我们附加了很多事件处理程序，但这是一个老问题，除非你真的有一些奇怪的列表项，否则不应该关注。在这种情况下，您的性能问题是您首先拥有那么多列表项。

另外就性能而言，jQuery实际上并没有对mouseenter做出反应，它只是不能，因为mouseenter只会在ul上触发一次，而不是在移动时子元素。那么https://jsfiddle.net/c8hk6ydn/怎么样？在jQuery中mouseenter是来自mouseover的合成事件，请参阅：https://github.com/jquery/jquery/blob/2792845534e36c39dbb9c8369ed96aaefa560081/src/event.js#L779。

所以现在如果你坚持要必须，你基本上会使用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}}

JSBin：http://emberjs.jsbin.com/xiwoqubumo/5/edit?html,css,js,output或者您可以尝试使用mouseOver更加原生地使用ember：

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

但基本上我原来的观点是，当Ember.js使用Ember.js方式时，不要像jQuery那样做，否则你最终会得到非常尴尬的代码。

灰烬行动助手

1 个答案: