2013-04-23 2 views
6

Stellen Sie sich vor, Sie möchten alle Klicks auf ein beliebiges Ankerelement auf einer Seite hören. Die Anker auf der Seite können während der Lebensdauer der Seite dynamisch hinzugefügt/entfernt werden und Sie möchten alle Klickereignisse registrieren, auch wenn sie neu hinzugefügt wurden.Gibt es im dart SDK eine Ereignisdelegierung?

Gibt es eine Möglichkeit, delegiertes Ereignis (wie in jQuery) in Dart mit seinen Standardbibliotheken anzuhängen?

In jQuery können Sie dies mit element.on('click', '.selector', handler); erreichen.

+0

Leider nein, habe ich auch gemacht Eine Hilfsmethode in unserer App, aber die wirkliche Lösung ist, dies entweder im Dart zu haben: html oder ein Pub-Paket wie Sie es getan haben. –

Antwort

7

Sie jetzt tun können, dass mit ElementStream.matches wie folgt aus:

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

Das ist interessant. Wie genau funktioniert es? Was wird im 'event.target' sein? Stellen Sie sich vor, dass innerhalb des 'div class = 'selector''s ein' Click me! 'Element. Jetzt gibt es drei verschiedene Elemente, an denen wir interessiert sein können: i) 'body' Element, das wir hören (das ist leicht zu erhalten), ii)' .selector' Element, das wir zusammenbringen, iii) '' Element, das wirklich erhielt den Klick. Welche davon wird im 'event.target' sein? Ist es möglich, irgendwie die anderen zu bekommen? –

+0

Ich mache gerade einen kurzen Test: 'e.currentTarget' zeigt auf' document.body' und 'e.target' zeigt auf' Klick mich! '. Ich glaube nicht, dass Sie das Element finden können, das zu '.selector' passt, weil es mehrere' .matches' Methoden geben könnte, die verkettet sind. Wie geht jQuery damit um? –

+0

In jQuery hat das 'event' Objekt, das an den Handler des delegierten Ereignisses übergeben wird, drei Eigenschaften:' event.target' - ' Click me! ',' event.currentTarget' - '.selector' und' event.delegatedTarget' - 'document.body', können Sie das Beispiel unter http://jsfiddle.net/d2fvW/ untersuchen, wenn es nicht möglich ist, Dart zu erhalten das Äquivalent der jQuery 'event.currentTarget', macht die Delegierung Funktionalität ziemlich unbrauchbar :-( –

2

Da ich keine praktikable Lösung gefunden habe, habe ich ein Paket erstellt, das Delegation ermöglicht.

Sie können es finden in http://pub.dartlang.org/packages/delegate

-Code ist einfach:

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