2013-04-23 6 views
6

कल्पना कीजिए, आप पेज पर किसी भी एंकर तत्व से बने सभी क्लिक सुनना चाहते हैं। पृष्ठ पर एंकरों को पृष्ठ के जीवनकाल के दौरान गतिशील रूप से जोड़ा/हटाया जा सकता है और आप सभी क्लिक घटनाओं को भी पंजीकृत करना चाहते हैं, यहां तक ​​कि नए जोड़े गए भी।क्या डार्ट एसडीके में कोई इवेंट प्रतिनिधिमंडल है?

क्या इसके मानक पुस्तकालयों का उपयोग करते हुए डार्ट में प्रतिनिधि ईवेंट (जैसे jQuery में) संलग्न करने का कोई तरीका है?

jQuery में आप इसे element.on('click', '.selector', handler); के साथ प्राप्त कर सकते हैं।

+0

दुख की बात है नहीं, मैं भी कर दिया है हमारे ऐप में एक सहायक विधि, लेकिन वास्तविक समाधान यह है कि यह या तो डार्ट में है: एचटीएमएल या आपके जैसे पब पैकेज। –

उत्तर

7

अब आप ऐसा कर सकते हैं ElementStream.matches इस तरह के साथ:

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

यह दिलचस्प है। वह कितना सटीक काम करता है? 'Event.target' में क्या होगा? कल्पना कीजिए, कि 'div class =' ​​selector 'के अंदर, कुछ ' मुझे क्लिक करें! 'तत्व। अब तीन अलग-अलग तत्व हैं जिनके बारे में हमें रुचि हो सकती है: i) 'शरीर' तत्व जिसे हम सुन रहे हैं (जिसे प्राप्त करना आसान है), ii) 'चयनकर्ता तत्व जो हम मेल खाते हैं, iii)' 'तत्व, वास्तव में क्लिक प्राप्त किया। इनमें से कौन सा 'event.target' में होगा? क्या किसी और को दूसरों को प्राप्त करना संभव है? –

+0

मैंने अभी एक त्वरित परीक्षण की नौकरानी की है: 'e.currentTarget'' document.body' और 'e.target' अंक' पर इंगित करें मुझे क्लिक करें! '। मुझे नहीं लगता कि आप '। सेलेक्टर' से मेल खाने वाले तत्व को पुनर्प्राप्त कर सकते हैं क्योंकि कई '.matches' विधियां जंजीर हो सकती हैं। JQuery इसे कैसे संभालता है? –

+0

jQuery में, 'ईवेंट' ऑब्जेक्ट को प्रतिनिधि कार्यक्रम के हैंडलर को पास किया गया है, तीन गुण हैं: 'event.target' -' मुझे क्लिक करें! ',' event.currentTarget' - '। चयनकर्ता 'और' event.delegatedTarget' -' document.body', आप http://jsfiddle.net/d2fvW/ पर उदाहरण की जांच कर सकते हैं यदि डार्ट में प्राप्त करना संभव नहीं है jQuery 'event.currentTarget' के बराबर, यह प्रतिनिधिमंडल कार्यक्षमता को बहुत ही अनुपयोगी बनाता है :-( –

2

क्योंकि मुझे कोई व्यवहार्य समाधान नहीं मिला है, मैंने पैकेज बनाया है जो प्रतिनिधिमंडल को सक्षम बनाता है।

आप http://pub.dartlang.org/packages/delegate

कोड में इसे पा सकते हैं सरल है:

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)); 
} 
संबंधित मुद्दे