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

Question

我有一组按钮,其状态我希望与班级切换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
  }
}

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

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

Answer 2

只是另一个答案......

如果你把动作放在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 3

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

然后你的切换可以只在你绑定到你的按钮类的项目上设置一个属性。

{{#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);
  }
}