En En

Действия


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

Если вы добавите хелпер {{action}} к элементу HTML в DOM, то когда пользователь нажмет его, назначенное событие будет отправлено соответствующему компоненту или контроллеру шаблона.

app/templates/components/post.hbs

<h3><button {{action "toggleBody"}}>{{title}}</button></h3>
{{#if isShowingBody}}
  <p>{{{body}}}</p>
{{/if}}

В компоненте или контроллере можно затем определить, что будет осуществлять действие в hook actions:

app/components/post.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    toggleBody() {
      this.toggleProperty('isShowingBody');
    }
  }
});

Подробнее о более продвинутых способах использования вы узнаете в главе "Запуск изменений с помощью действий" из раздела "Компоненты". Но сначала нужно ознакомиться с основами в этой главе.

Параметры действия

По желанию вы можете передавать аргументы обработчику действия. Любые значения, которые вы передали хелперу {{action}} после имени действия, будут переданы обработчику в качестве аргументов.

Например, если был передан аргумент post:

<p><button {{action "select" post}}>✓</button> {{post.title}}</p>

Обработчик действия select будет вызван с единственным аргументом, который содержит модель post:

app/components/post.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    select(post) {
      console.log(post.get('title'));
    }
  }
});

Указание типа события

По умолчанию, хелпер {{action}} ожидает событий нажатия и запускает действие, когда пользователь щелкает по элементу.

Вы можете указать альтернативное событие с помощью опции on.

<p>
  <button {{action "select" post on="mouseUp"}}>✓</button>
  {{post.title}}
</p>

Вам следует использовать имена событий в стиле camelCased. Например, имя события keypress, состоящее из двух слов, будет выглядеть как keyPress.

Разрешение клавиш-модификаторов

По умолчанию хелпер {{action}} будет игнорировать нажатия на клавиши-модификаторы. Но можно использовать опцию allowedKeys, чтобы указать, какие клавиши не следует игнорировать.

<button {{action "anActionName" allowedKeys="alt"}}>
  click me
</button>

Таким образом {{action}} сработает при нажатии клавиши alt.

Разрешение изначального действия браузера

По умолчанию хелпер {{action}} препятствует выполнению изначального действия браузера на событие модели DOM. Если вы хотите разрешить действие браузера, то можете убрать в Ember запрет.

Например, у вас обычный тег link, и вы хотите, чтобы ссылка отправила пользователя на другую страницу и дополнительно запустила действие при нажатии. Для этого можно использовать preventDefault=false:

<a href="newPage.htm" {{action "logClick" preventDefault=false}}>Go</a>

Без preventDefault=false, если пользователь нажмет ссылку, Ember.js запустит действие, но пользователь останется на текущей странице.

С preventDefault=false, если пользователь нажмет ссылку, Ember.js запустит действие, и пользователь будет направлен на новую страницу.

Изменение первого параметра действия

Если указан параметр value для хелпера {{action}}, его значение будет рассматриваться как путь свойства, который будет считываться с первого параметра действия. Это полезно при использовании получателя событий и позволяет работать с односторонними привязками.

<label>What's your favorite band?</label>
<input type="text" value={{favoriteBand}} onblur={{action "bandDidChange"}} />

Допустим, что у нас есть обработчик действия, который отображает свой первый параметр:

actions: {
  bandDidChange(newValue) {
    console.log(newValue);
  }
}

По умолчанию обработчик действия получает первый параметр получателя событий, объект события, который браузер передает обработчику. Поэтому bandDidChange отображает Event {}.

Использование параметра value меняет это поведение, извлекая свойство из объекта события:

<label>What's your favorite band?</label>
<input type="text" value={{favoriteBand}} onblur={{action "bandDidChange" value="target.value"}} />

Параметр newValue становится свойством target.value объекта события. А оно служит значением поля ввода, которое набрал пользователь (например, 'Foo Fighters').

Назначение действий для некликабельных элементов

Обратите внимание, что действия можно назначать любому элементу модели DOM, но не все они реагируют на событие click. Например, если назначить действие ссылке a без атрибута href или для div, некоторые браузеры не выполнят привязанную функцию. Если нужно определить действия для таких элементов, в CSS существует обходной прием, чтобы сделать их кликабельными добавьте cursor: pointer. Например:

[data-ember-action]:not(:disabled) {
  cursor: pointer;
}

Помните, что даже с помощью этого приема событие click не запустится автоматически при использовании клавиш, которые запускают событие, эквивалентное click (например, нажатие клавиши enter при активном состоянии элемента). Браузеры будут запускать событие интерактивных элементов только по умолчанию. Элемент при этом также не будет доступным пользователям вспомогательных технологий (с ограниченными возможностями). Вам придется добавлять, например, role и/или tabindex, чтобы сделать элемент доступным для пользователей.


Комментарии (2)

  1. Алексей 20 июня 2016, 23:24 # 0
    Как отправить данные формы?
    1. Евгений 15 июля 2016, 09:18 # 0
      Думаю следует начать с этой статьи.
    Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.