Как мы можем получить оригинальное событие в действии

Я обновляю личный проект, где я использовал ember.js версии 0.9.x.

Итак, была выпущена новая версия, и у меня возникла проблема, связанная с действием ember.

У меня есть следующий HTML-код:

<li><a href="#" id="startApp" {{action activateView target="view"}}> Home</a> <span class="divider">|</span></li>

где, когда я нажимаю на его вызов, эта функция activView:

activateView: function(event, context) {
   console.log(event);              
}

но событие и контекст не определены. Я уже пробовал this.context, и он возвращает неопределенное.

Основная идея его получить идентификатор ссылки, когда пользователь нажимает.

Я знаю маршруты и вспомогательную ссылку на руль, но мне действительно нужен этот идентификатор для других вещей,

Ответы

Ответ 1

Событие не передается с помощью помощника действий. Если вы действительно хотите объект события, вам нужно определить представление и использовать событие click:

App.MyLink = Em.View.extend({
  click: function(e) {
  }
});

а затем:

<li>{{view App.MyLink}}</li>

но требующий доступа к dom-событию является редким случаем, потому что вы можете передать аргументы {{action}}. В вашем случае:

<li><a href="#" id="startApp" {{action activateView "startApp" target="view"}}> Home</a> <span class="divider">|</span></li>

и в случае:

activateView: function(id) {
  console.log(id);              
}

Ответ 2

В Ember 2...

Внутри вашего действия у вас всегда есть доступ к объекту Javascript event, который имеет элемент DOM, например.

actions: {
    myAction() {
        console.log(event.target) // prints the DOM node reference
    }
}

Ответ 3

вам нужно передать идентификатор в свою функцию, чтобы он был доступен в представлении, вы можете передать все, что захотите, но в вашем примере это должно сделать это

HTML

<li><a href="#" id="startApp" {{action activateView "startApp" target="view"}}> Home</a> <span class="divider">|</span></li>

то у вас есть доступ к идентификатору или тому, что когда-либо вы проходили, в представлении

JS

...
activateView: function(data){
  console.log(data); // should be the ID "startApp"
}
...

Ответ 4

Есть два способа получить объект event в действиях,

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

В действии функция хеш-переключения всегда будет принимать собственный объект события браузера в качестве последнего аргумента.

actions:{
 toggle(model,event){

 }
}

В приведенном ниже формате действие toggle не получит объект event,

  • <button {{action 'toggle'}}>{{model.title}}</button>
  • Входные помощники, такие как {{input key-press="toggle" и {{text-area key-press="toggle"

Хорошо объяснено в руководстве ember https://guides.emberjs.com/v2.12.0/components/handling-events/#toc_sending-actions