2013-04-23 10 views
6

Wyobraź sobie, że chcesz słuchać wszystkich kliknięć wykonanych na dowolnym elemencie kotwicy na stronie. Zakotwiczenia na stronie można dynamicznie dodawać/usuwać podczas okresu istnienia strony i chcesz zarejestrować wszystkie zdarzenia kliknięcia, nawet nowo dodane.Czy istnieje delegacja wydarzeń w dart SDK?

Czy istnieje sposób dołączania delegowanego zdarzenia (np. W jQuery) do Dart przy użyciu jego standardowych bibliotek?

W jQuery można to osiągnąć za pomocą element.on('click', '.selector', handler);.

+0

Niestety nie, ja również metoda pomocnicza w naszej aplikacji, ale prawdziwym rozwiązaniem jest albo to w rzutce: html, albo w pakiecie Pub, tak jak Ty. –

Odpowiedz

7

Teraz można zrobić z ElementStream.matches tak:

document.body.onClick.matches('.selector').listen((Event event) { 
    print('Super cool!'); 

    // The currently registered target for the event 
    // document.body 
    event.currentTarget; 

    // The element whose CSS selector matched 
    // .selector 
    event.matchingTarget; 

    // The target to which the event was originally dispatched 
    // the real element clicked under .selector 
    event.target; 
}); 
+0

To jest interesujące. Jak dokładnie to działa? Co będzie w 'event.target'? Wyobraź sobie, że wewnątrz 'div class = 'selector'' jest pewne' Kliknij mnie! 'element. Teraz możemy zainteresować się trzema różnymi elementami: i) elementem "body", którego słuchamy (jest to łatwe do zdobycia), ii) elementem '.selector', który dopasowujemy, iii)' '' elementem, który naprawdę otrzymałem kliknięcie. Które z nich znajdą się w 'event.target'? Czy możliwe jest uzyskanie w jakiś sposób innych? –

+0

Po prostu wykonałem szybki test: 'e.currentTarget' wskazuje na' document.body' i 'e.target' wskazuje na' Kliknij mnie! '. Nie sądzę, żebyś mógł pobrać element pasujący do '.selector', ponieważ może istnieć kilka łańcuchów' .match'ów. W jaki sposób obsługuje to jQuery? –

+0

W jQuery, obiekt 'event' przekazany do obsługi delegowanego zdarzenia ma trzy właściwości:' event.target' - ' Kliknij mnie! ',' event.currentTarget' - '.selector' oraz' event.delegatedTarget' - 'document.body', możesz sprawdzić przykład na http://jsfiddle.net/d2fvW/ Jeśli nie jest to możliwe w Dart, aby uzyskać odpowiednik jQuery 'event.currentTarget', sprawia, że ​​funkcja delegowania jest całkiem niemożliwa do użytku :-( –

2

Ponieważ nie znalazłem żadnego realnego rozwiązania, utworzyłem pakiet, który umożliwia delegowanie.

Można go znaleźć na http://pub.dartlang.org/packages/delegate

Code jest prosta:

delegate(parent, condition, handler) { 
    return (event) { 
    var element = event.target; 
    while (element != parent && element != null) { 
     if (condition(element)) { 
     handler(event, element); 
     } 
     element = element.parent; 
    } 
    }; 
} 

delegateOn(parent, String eventType, condition, handler) { 
    parent.on[eventType].listen(delegate(parent, condition, handler)); 
} 
Powiązane problemy