将单击的 DOM 元素的引用传递给 Ember 中的操作处理程序答案

【问题标题】：Pass a reference of the clicked DOM element to the action handler in Ember将单击的 DOM 元素的引用传递给 Ember 中的操作处理程序
【发布时间】：2015-06-11 15:08:27
【问题描述】：

我有一组按钮，我希望通过 active 类切换其状态。如果我有一个按钮，那么我会将active 类绑定到控制器属性并在点击处理程序中切换该属性：

<button {{action 'toggle'}} class="{{active}}">model.title</button>

actions: {
  toggle: function() {
    this.set('active', true);
  }
}

但是我有多个按钮，所以我不确定我可以绑定什么。如果我可以将单击按钮的引用传递给操作处理程序，那将很有用，但我不确定如何执行此操作。

{{#each item in model}}
  <button {{action 'toggle' referenceToButton}}>model.title</button>
{{/each}}

actions: {
  toggle: function(buttonReference) {
    // add `active` class to buttonReference
  }
}

完成此任务的最佳方法是什么？

【问题讨论】：

标签： ember.js htmlbars

【解决方案1】：

尽管发帖人得到了他想要的答案，但我想我会发布一个我认为是原始问题意图的答案：

如何从操作中获取点击的 DOM 元素的引用？因为我来这里是为了寻找该问题的答案但没有找到。

我找不到获取实际元素的方法，但您可以通过this 获取根视图元素（包装模板中定义的元素）：

模板：

<button {{action 'toggle' this}}>model.title</button>

控制器、视图、组件：

actions: {
  toggle: function(event) {
    // Get element (as in the return value of document.getElementById(id))
    var viewElements = event.element;
    var elementsInTemplate = viewElements.children;
    var button = viewElements.getElementsByTagName('button');
    //also can use getElementsByClassName, use jQuery etc.
  }
}

【讨论】：

【解决方案2】：

只是另一个答案...

如果您将操作放在 onclick（或任何其他 dom 事件）中，您将在最后一个参数中获得“事件”javascript 对象（因此您可以使用 event.target 来获取和操作该对象）

模板：

<button onclick={{action 'toggle' model.title}}>model.title</button>

路由或控制器：

actions: {
  toggle (title, event) {
    // TODO: use title 
    let element = Ember.$(event.target);
    element.toggleClass("active");

    return false;
  }
}

希望对你有帮助

【讨论】：

奇怪的是，如果你使用这个方法，你就不能引用响应者链更远的动作。例如，如果您的应用程序路由中有 openModal 操作，<a {{action 'openModal'}}> 将冒泡到该应用程序路由。但是，<a onclick={{action 'openModal'}}> 不会。它甚至不会在没有错误的情况下显示模板。在这种情况下，必须在模板的直接控制器上定义openModal。
原来使用onclick={{action 'toggle'}}会变成和onclick=function() { ... }一样。所以你会有标准的 dom 冒泡，但没有 ember 动作冒泡。以下是关于该主题的一些讨论：github.com/emberjs/ember.js/issues/14867#issuecomment-280341753

【解决方案3】：

你想要传递的不是模型项而不是按钮吗？

然后你的切换可以只为你bind to your button class的项目设置一个属性。

{{#each item in model}}
  <button {{bind-attr class="item.isActive:active"}} {{action 'toggle' item}}>model.title</button>
{{/each}}

actions: {
  toggle: function(item) {
    item.set('isActive', true);
  }
}

【讨论】：

如果它是一个复选框，我想知道它是选中还是未选中？

【解决方案4】：

你可以将active属性引入items

{{#each item as |model|}}
  <button {{action 'toggle' model}} class={{if model.active 'active'}}>{{model.title}}</button>
{{/each}}

如果active=true 则active 类将应用于按钮。

actions: {
  toggle: function(buttonReference) {
    buttonReference.set('active', true);
  }
}

回答问题标题Pass a reference of the clicked DOM element to the action handler in Ember。

1.如果您正在使用组件，那么您可以在组件中定义任何list of event names，并且旨在接收本机event 对象。例如。， {{my-button model=model}}

export default Ember.Component.extend({
 click(event){
  //oncliking on this componen will trigger this function
  return true; //to bubble this event up
 }
})

2.如果您使用像button 这样的html标签，那么您需要将（闭包）操作分配给内联事件处理程序。

{{#each item as |model|}}
      <button onclick={{action 'toggle' model}}>{{model.title}}</button>
{{/each}}

在操作中，哈希 toggle 函数将始终接收本机浏览器 event 对象作为最后一个参数。

actions:{
 toggle(model,event){

 }
}

在这种<button {{action 'toggle' model}}>{{model.title}}</button> 格式中，动作toggle 将不会收到event 对象，

在 ember 指南 https://guides.emberjs.com/v2.12.0/components/handling-events/#toc_sending-actions 中解释得非常好

【讨论】：