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

我有一组按钮，我希望在类

处于活动状态时切换这些按钮的状态。如果我只有一个按钮，那么我会将
active
类绑定到控制器属性，并在单击处理程序中切换该属性：

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

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

model.title
行动：{
切换：函数（）{
此.set（'active'，true）；
}
}

但是我有多个按钮，所以我不确定我能绑定什么。如果我可以将对单击按钮的引用传递给操作处理程序，这将非常有用，但我不确定如何做到这一点

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

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

{{{#模型中的每个项目}
模型名称
{{/每个}}
行动：{
切换：功能（按钮参考）{
//将'active'类添加到buttonReference
}
}

实现这一目标的最佳方式是什么
 您不想传递模型项而不是按钮吗

然后，您的切换只需在您要创建的项目上设置一个属性即可

{{{#模型中的每个项目}
模型名称
{{/每个}}
行动：{
切换：功能（项目）{
项集（'isActive'，true）；
}
}
即使海报得到了他想要的答案，我想我还是会发布一个我认为是原始问题意图的答案：

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

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

模板：

model.title

控制器、视图、组件：

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

只是另一个答案

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

模板：

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

希望对您有所帮助
您可以将
活动
属性引入
项目

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

要回答标题为
的问题，请将单击的DOM元素的引用传递给Ember中的操作处理程序

1.如果您使用的是组件，那么您可以在组件中定义其中任何一个，该组件设计用于接收本机
事件
对象。
如。，
{{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.如果您正在使用html标记，如
按钮
，则需要将（闭包）操作分配给内联事件处理程序

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

在此
{{model.title}
格式中，操作
切换
将不会接收
事件
对象

在《余烬指南》中解释得很好
如果它是一个复选框，我想知道它是选中的还是未选中的呢？奇怪的是，如果你使用这种方法，你就不能引用响应者链上更远的操作。例如，如果在应用程序路由中有一个
openModal
操作，
将冒泡到该应用程序路由。但是，
它不会。它甚至不会显示没有错误的模板。在这种情况下，必须在模板的直接控制器上定义
openModal
。结果表明，使用
onclick={{{action'toggle'}}
将与
onclick=function（）{…}
一样。因此，您将有标准dom冒泡，但没有余烬动作冒泡。下面是关于这个主题的一些讨论：
actions: {
  toggle: function(buttonReference) {
    buttonReference.set('active', true);
  }
}

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

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

actions:{
 toggle(model,event){

 }
}