10

我有一组按钮，我希望用一个类来切换其状态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
  }
}

实现这一目标的最佳方法是什么？

4

4 回答 4

16

即使张贴者得到了他想要的答案，我想我会发布一个我认为是原始问题意图的答案：

如何从操作中获取单击的 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.
  }
}
于 2015-04-14T01:02:44.763 回答
13

只是另一个答案...

如果您将操作放在 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;
  }
}

希望能帮助到你

于 2016-05-06T06:55:45.320 回答
5

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

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

{{#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);
  }
}
于 2015-04-07T09:33:05.033 回答
0

您可以将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.如果您使用的是组件，那么您可以在组件中定义此事件名称列表中的任何一个，并且旨在接收本机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.如果您使用 html 标签，button那么您需要将（关闭）操作分配给内联事件处理程序。

{{#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中解释得非常好

于 2017-04-28T06:43:36.787 回答