Передать ссылку на выбранный элемент 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

Разве модель не то, что вы хотите передать, а не кнопка?

Тогда ваш переключатель может просто установить атрибут для элемента, который вы привязываете к своему классу кнопок.

{{#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

Несмотря на то, что автор получил ответ, который хотел, я решил опубликовать ответ на то, что, как я считаю, было целью первоначального вопроса:

Как получить ссылку на выбранный элемент 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), вы получите объект JavaScript "event" в последнем параметре (так что вы можете использовать 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}}

если 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/