backbone.js और jQuery

के साथ ईवेंट बाध्यकारी क्लिक मुझे मेनू को टॉगल करने के लिए मेरे backbone.js -view में दो ईवेंट बाध्य करने की आवश्यकता है। विचार यह है कि यदि आईडी #toggler वाला बटन बटन मेनू एपर्स पर क्लिक किया गया है और #menu तत्व के बाहर कोई भी क्लिक मेनू को छुपाएगा।backbone.js और jQuery

दुर्भाग्य से मैं outsideMenuHandler() को बिना किसी क्लिक पर बुलाया गया है, भले ही मैं #menu तत्व पर क्लिक किया गया हो या नहीं, इसके बावजूद मैं बैकबोन की घटना बाध्यकारी के साथ काम नहीं कर सकता।

मुझे यह काम करने के लिए क्या बदलना चाहिए?

myView = Backbone.View.extend({ 

    events: { 
     'click #menu': 'insideMenuHandler', 
     'click':  'outsideMenuHandler' 
    } 

    insideMenuHandler: function(e) {}, // Called when clicking #menu 
    outsideMenuHandler: function(e) {} // Called on every click both on and off #menu 

}

बस एक संदर्भ के रूप में, यहाँ क्या मैं अकेला jQuery का उपयोग कर करना होगा है:

यह मैं backbone.js में क्या किया है, जो इरादा के रूप में काम नहीं करता है
$(document).click(function(event) { if ($(event.target).closest('#menu').get(0) == null) { $("#menu").slideUp(); } });

स्रोत

2012-01-30 Industrial

कुछ ऐसी चीजें हैं जिन्हें आपको हल करने की आवश्यकता है।

सबसे पहले, यदि आपका insideMenuHandler रिटर्न false या कॉल e.stopPropogation() फिर अपने outsideMenuHandler#menu पर क्लिक के लिए कहा जाता है नहीं किया जाएगा। उदाहरण के लिए:

http://jsfiddle.net/ambiguous/8GjdS/

लेकिन वह अपने पूरे समस्या नहीं है। आपके outsideMenuHandler को केवल आपके दृश्य पर क्लिक के लिए बुलाया जाएगा; इसलिए, यदि कोई आपके दृश्य के बाहर वाले पृष्ठ पर क्लिक करता है, तो आपके outsideMenuHandler को कॉल नहीं किया जाएगा और आपका मेनू नीचे नहीं जायेगा। यदि आप #menu के बाहर कहीं भी क्लिक करते समय मेनू को नीचे जाना चाहते हैं, तो आपको body पर मैन्युअल रूप से बाध्य करना होगा और जब आपका दृश्य नष्ट हो जाए तो मैन्युअल रूप से अनबाइंड करना होगा। इस तरह कुछ:

var myView = Backbone.View.extend({ 
    events: { 
     'click #menu': 'insideMenuHandler' 
    }, 

    initialize: function() { 
     _.bindAll(this, 'insideMenuHandler', 'outsideMenuHandler'); 
    }, 

    render: function() { 
     // Both <body> and <html> for paranoia. 
     $('body, html').on('click', this.outsideMenuHandler); 
     // ... 
     return this; 
    }, 

    remove: function() { 
     // Clean up after ourselves. 
     $('body, html').off('click', this.outsideMenuHandler); 
     // ... 
    }, 

    // ... 
    outsideMenuHandler: function(e) { 
     // ... 
     return false; 
    } 
});

और फिर अपने विचार को ठीक से निकालना सुनिश्चित करें। उदाहरण के लिए:

http://jsfiddle.net/ambiguous/MgkWG/1/

स्रोत

2012-01-30 20:36:55

धन्यवाद आपके उत्तर के लिए एक बहुत। बहुत ही सराहनीय! एक त्वरित सवाल - जैसा कि मैं समझता हूं, एक क्लिक इवेंट रिटर्न 'झूठी' होने से किसी भी "डिफ़ॉल्ट घटना" को होने से रोका जा सकता है, जिसका अर्थ है कि अन्य सभी क्लिक 'बाहरीमेनूंडलर' रिटर्न 'झूठी' के रूप में अक्षम हो जाएंगे। क्या मैं खुद को परेशान कर रहा हूं अगर मैं अपना तर्क करने के बाद अपना 'बाहरी मेनू हैंडलर' वापसी 'सत्य' देता हूं (मेरा मेनू छुपा रहा है)? – Industrial

@ इंडस्ट्रियल: आप 'बॉडी, एचटीएमएल' बाध्यकारी से 'बाहरीमेनू हैंडलर' को डबल कॉल के साथ समाप्त कर देंगे, लेकिन यह कोई समस्या नहीं हो सकती है। आप शायद 'बाहरी मेनू हैंडलर' से' एचटीएमएल 'के साथ बाध्यकारी हो सकते हैं, लेकिन आप ब्राउज़र को यह जांचने के लिए चाहते हैं कि यह सुनिश्चित करने के लिए कि यह आपके द्वारा देखी जाने वाली सभी ब्राउज़रों में ठीक से व्यवहार करता है। –

-1

समस्या यह है कि आप अपने ईवेंट को डीओएम तत्व से बांधते हैं जिसे आप विचारों के रूप में परिभाषित करते हैं। इसलिए यदि यह आपके jquery उदाहरण में window.document नहीं है तो आप उनके बाहर किसी भी क्लिक को नोटिस नहीं कर सकते हैं। आपके उदाहरण में सबसे आसान तरीका घटनाओं को मैन्युअल रूप से jquery के साथ जोड़ना होगा, न कि रीढ़ की हड्डी के साथ।

स्रोत

2012-01-30 20:33:56

backbone.js और jQuery

उत्तर

संबंधित मुद्दे