Події в Angular Light

Angular Light — це самостійний клієнтський MV(C/VM) фреймворк, який побудований на ідеях Angular.js і Knockout.js і схожий на спрощений Angular.js.



У Angular Light є директиви обробки подій: al-click, al-dblclick, al-submit, al-blur, al-change, al-focus, al-keydown, al-mousedown, al-mouseenter і т. д. Як бачите під кожне окреме подія створюється окрема директива, а якщо директиви немає під якусь подію, то доводилося робити директиву вручну і це не ефективно. Тому було прийнято рішення зробити можливість обробляти будь-які події одним способом. Розглядалися різні варіанти (наприклад
al-on="keypress=onClick($event,$element), mousedown=onMouseMove()"
), в результаті зупинилися на варіанті, який використовується (або схожий) в інших фреймворках.

Приклади:

<div al-on.click="onClick()"></div> <!-- При кліці викликається ф-ія onClick() -->
<div al-on.mousemove="x=$event.X"></div> <!-- При русі миші координата X записується в змінну x -->
<input al-on.натискання="onKey()" />

І скорочений варіант:

<div @click="onClick()"></div>
<div @mousemove="x=$event.X"></div>
<input @keydown="onKey()" />

Так само можна використовувати модификторы, якими можна фільтрувати події, робити альясы або змінювати їх поведінка, приклад:

<input @keydown.ввід="onEnter()" /> <!-- Функція onEnter() викликається якщо відбулася подія keydown з кодом 13 (enter), тобто натиснута клавіша Enter -->
<input @keydown.13="onEnter()" /> <!-- Якщо вказати число буде фільтрація по keyCode, в даному випадку це "Enter" -->
<input @keydown.ctrl.ввід="onCtrlEnter()" /> <!-- Ф-ія викликається при натисканні ctrl + enter -->
<input @keydown.left="onLeft()" /> <!-- ф-ія викликається при натисканні клавіши left -->

Для подій keydown, keypress, keyup доступні такі модифікатори: enter, tab, delete, backspace, esc, space, up, down, left, right або можна вказати будь-код числом. І дод. клавіші: alt, ctrl або ctrl), shift, meta. У підсумку можна зробити такий приклад без додаткового js.

Для всіх подій доступні модифікатори: stop (викликає stopPropagation), prevent (викликає preventDefault), noscan (скасовує виклик $scan для події).

throttle і debounce
Також серед модифікаторів є throttle та debounce, тепер будь-яку подію можна зробити «відкладеним», приклади:

<input @keydown.throttle-300="onKeyDown()" />
<div @mounemove.debounce-100="onMove()"></div>

Приклад на jsfiddle

Т. к. для події використовується окремий атрибут, то це дозволяє підписуватися на одне і теж подія декілька разів, за рахунок цього можна отримати різні ефекти:

<div @mouseenter="t=1" @mouseenter.throttle-500="t*=2" />

Приклад на jsfiddle

Користувальницькі модифікатори
Якщо стандартних модифікаторів не вистачає, то можна зробити свої. Приклад модифікатора який виконує роль псевдонімів подій, тобто об'єднує події keydown та blur myevent:

alight.hooks.eventModifier.myevent = 'keydown blur';

Використання:

<input @myevent="onMyEvent()" />

Приклад модифікатора як фільтр, що спрацьовує при натисканні Enter:

alight.hooks.eventModifier.ввід = {
event: 'keydown', // Фільтр буде працювати для події keydown
fn: function(event, env) {
env.stop = event.keyCode != 13; // блокуємо подія якщо не натиснутий Enter
}
}

Такий модифікатор можна використовувати як фільтр — приклад, або як псевдо подія — приклад.

Крім того можна інтегрувати будь-які додаткові бібліотеки, наприклад бібліотека touch подій Hammer.js, події tap та pan, приклад.

Посилання на документацію.

Так само з'явилися універсальна обробка атрибутів, шаблонів, бета версія компонент і роутера в стилі reactjs, і ще багато різних дрібниць, але це в наступних статтях.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.