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

Question

我有一组按钮，我希望用 class active 切换它们的状态。如果我只有一个按钮，那么我会将 active class 绑定到控制器属性并在点击处理程序中切换属性：

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

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

Answer 1

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

然后你的开关就可以在你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);
  }
}

Answer 2

尽管 poster 得到了他想要的答案，但我认为我会 post 回答我认为是原始问题的意图：

如何从操作中获取点击的 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.
  }
}

Answer 3

另一个答案...

如果您将操作放在 onclick（或任何其他 dom 事件）中，您将在最后一个参数中获得 "event" 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;
  }
}

希望对您有所帮助

Answer 4

你可以介绍active属性到items

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

if active=true then active class 将应用于按钮。

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

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

1.If 你正在使用组件，那么你可以在组件中定义任何这个 list of event names 并且旨在接收原生 event object。例如。， {{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.If 您正在使用 html 标签，例如 button 那么您需要为内联事件处理程序分配一个（关闭）操作。

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

在 actions hash toggle 函数中，将始终接收本机浏览器 event object 作为最后一个参数。

actions:{
 toggle(model,event){

 }
}

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

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

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

Pass a reference of the clicked DOM element to the action handler in Ember

ember.js

htmlbars