Tag Archives: bind
Директивы для обработки DOM-событий в AngularJS
Всё достаточно просто, много раз использовал, но надо бы и здесь выложить. Допустим, нам нужно вешать AngularJS-обработчики на DOM-события mouseenter и mouseleave. Для этого пишем генератор директив по массиву:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
var directives = angular.module('CommonDirectives', []); angular.forEach(['Mouseenter', 'Mouseleave'], function (eName) { var aName = 'mm' + eName, eName = eName.toLowerCase(); directives. directive(aName, ['$parse', function($parse) { return { restrict: 'A', link: function link($scope, $element, attrs) { var fn = $parse(attrs[aName]); $element.bind(eName, function ($event) { $scope.$apply(function () { fn($scope, {$event: $event}); }); }); } }; }]); }); |
Ну и можно добавлять названий дректив по вкусу. Использование:
1 2 3 4 5 6 7 8 9 10 11 |
<li ng-repeat="gift in selectedGroup.gifts" ng-class="{'selected': gift.id == selectedGift.id, 'hovered': gift.id == hoveredGift.id}" ng-click="selectGift(gift)" mm-mouseenter="hoveredGift = gift)" mm-mouseleave="hoveredGift = undefined" > <div class="gift-container"> <b class="{{gift.key}}"></b> </div> </li> |
Результат — http://grab.by/tXHy. Таким же образом можно делать директивы для любых событий: focus, blur, keypress …
Расширение базового функционала jquery-ui-виджетов
Захотелось сделать более правильную работу с триггерением/навешиванием обработчиков на события, чем это реализовано в jquery-ui. При этом сам функционал надоело копировать из виджета в виджет. В общем, вот простой добавить методы к своим виджетам:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
(function( $ ) { "use strict"; /** * расширение базового функционала jquery-ui */ $.widget( "my.my_extension", { _triggerSmart: function( EventName, Data ) { var me = this; var $me = $( me.element ); $me.trigger( EventName + '.' + me.widgetName, Data ); return me; }, _bindSmart: function( EventName, Handler ) { var me = this; var $me = $( me.element ); // боремся с повторным навешиванием обработчика var events = $.data( $me.get( 0 ), 'events' ); var filteredEvents = []; if ( EventName in events ) { filteredEvents = $.grep( events[EventName], function( Event ) { return Event.type == EventName && Event.namespace == me.widgetName; } ); } if ( ! filteredEvents.length ) { $me.bind( EventName + '.' + me.widgetName, Handler ); } return me; } } ); }( jQuery )); |
Потом для каждого виджета нужно будет указать опциональный второй параметр
1 2 3 4 5 |
$.widget( "my.fast_search", $.my.my_extension, { options: { ... |
Внимание нужно обратить на второй параметр $.my.my_extension, который в …
Работа с событиями в jQuery-ui
Если нужно из виджета стриггерить событие, это сделать это можно двумя способами:
1 |
this.element.trigger( 'my_event_element', { option1: true } ); |
1 |
this._trigger( '_my_event_widget', null, { option1: true } ); |
Допустим, что наш виджет называется MyCoolWidget. Тогда поймать наши события можно так:
1 2 3 4 |
$( '#div' ).MyCoolWidget(); $( '#div' ). bind( 'my_event_element', function( Event, Ui ) { console.dir( Ui ) } ). bind( 'mycoolwidget_my_event_widget', function( Event, Ui ) { console.dir( Ui ) } ); |
Обратите внимание на второй bind — префиксом к событию в этом случае явлется название виджета в нижнем регистре. Кстати, есть ещё один способ обработать событие от this._trigger — …