2013-04-23 2 views
6

Immaginate, volete ascoltare tutti i clic fatti su qualsiasi elemento di ancoraggio sulla pagina. Gli ancore sulla pagina possono essere aggiunti/rimossi dinamicamente durante il ciclo di vita della pagina e si desidera registrare tutti gli eventi dei clic, anche su quelli appena aggiunti.Esiste una delega dell'evento in dk SDK?

C'è un modo come associare un evento delegato (come in jQuery) in Dart usando le sue librerie standard?

In jQuery è possibile ottenere ciò con element.on('click', '.selector', handler);.

+0

Purtroppo no, ho anche fatto un metodo di supporto nella nostra app, ma la vera soluzione è quella di avere questo nel dardo: html o un pacchetto di Pub come hai fatto tu. –

risposta

7

Ora è possibile farlo con ElementStream.matches come questo:

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

Questo è interessante. Come funziona esattamente? Cosa sarà in "event.target'? Immagina, che all'interno del 'div class = 'selector'', ci sia' Click me! 'elemento. Ora ci sono tre diversi elementi a cui possiamo essere interessati: i) elemento 'body' su cui stiamo ascoltando (che è facile da ottenere), ii) elemento' .selector' che stiamo cercando, iii) '' elemento, che veramente ricevuto il clic. Quale di questi sarà nel 'event.target'? È possibile ottenere in qualche modo gli altri? –

+0

Ho appena fatto un test rapido: 'e.currentTarget' punta a' document.body' e 'e.target' punta a' Click me! '. Non penso che sia possibile recuperare l'elemento corrispondente a '.selector' perché potrebbero esserci diversi metodi' .matches' concatenati. Come fa jQuery a gestirlo? –

+0

In jQuery, l'oggetto 'event' passato al gestore dell'evento delegato ha tre proprietà:' event.target' - ' Click me! ',' event.currentTarget' - '.selector' e' event.delegatedTarget' - 'document.body', puoi esaminare un esempio su http://jsfiddle.net/d2fvW/ Se non è possibile in Dart ottenere l'equivalente di jQuery 'event.currentTarget', rende la funzionalità di delega piuttosto inutilizzabile :-( –

2

Perché non ho trovato alcuna soluzione praticabile, ho creato il pacchetto che consente la delega.

Lo si può trovare in http://pub.dartlang.org/packages/delegate

codice è semplice:

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