इवेंट बाइंडिंग

Question

खोने वाले एकाधिक रीढ़ की हड्डी के दृश्यों के लिए एक कंटेनर के रूप में एक एकल div का उपयोग करके ठीक है, इसलिए मेरे पास एक नेविगेशन और डैशबोर्ड की अवधारणा है। मेरे राउटर में जब मैं नेविगेशन लिंक पर क्लिक करता हूं, तो मैं सक्रिय टैब सेट करने के लिए अपने डैशबोर्ड दृश्य पर कॉल कर रहा हूं।

उदाहरण के लिए:

एनएवी

<a href="#" class="dashabord_tab" id="widgets">Widgets</a> 
<a href="#" class="dashabord_tab" id="Foobars">Foobars</a> 

dashboard_container.jst.tpl

<div id="nav"></div> 
<div id="current_tab"></div> 

DASHABORDVIEW

DashboardView = Backbone.View.extend({ 
    template:JST.dashboard_container, 
    render: function(){ 
    $(this.el).html(this.template()); 
    }, 
    activateWidgets: function(){ 
    if(!(this.widgets_view)){ 
     this.widgets_view = new WidgetsView(); 
     this.widgets_view.render(); 
    } 
    $(this.el).find("#current_tab").html(this.widgets_view.el); 
    }, 
    activateFoobars: function(){ 
    if(!(this.foobars_view)){ 
     this.foobars_view = new FooBarsView(); 
     this.foobars_view.render(); 
    } 
    $(this.el).find("#current_tab").html(this.foobars_view.el); 
    } 
}); 

समस्या:

+०१२३५१६४१०६१

तो पहली बार जब मैं अपेक्षित रूप से टैब लोड को widgets_tab या foobar_tab पर स्विच करता हूं। हालांकि अगर मैं एक टैब पर स्विच करता हूं, तो इसे से बाहर निकलता हूं, फिर उस पर वापस स्विच करता हूं, मेरे दृश्य में सभी घटनाएं अब बाध्य नहीं होती हैं। क्लिक करना, hoevering, उदाहरण के लिए foobars_view अंदर विचारों में से कोई भी क्लिक करने योग्य, hoverable कर रहे हैं, आदि

अतीत में मैं बहुत की तरह बच्चे विचारों में से हर एक के लिए एक आवरण बनाने की है,:,

अतीत समाधान pita:

activateFoobars: function(){ 
    $('.tab_wrapper').hide(); 
    if($(this.el).find("#foobars_wrapper").length < 1){ 
     $(this.el).append("<div class='tab_wrapper' id='foobars_wrapper'></div>"); 
     this.foobars_view = new FooBarsView(); 
     $(this.el).find("#foobars_wrapper").html(this.foobars_view.render().el); 
    } 
    $('#foobars_wrapper').show(); 
    } 

मैं इसे जिस तरह से मैं सिर्फ ऊपर से पता चला है बल्कि ऐसा नहीं चाहते हैं, और मैं वास्तव में सिर्फ एक active_tab div कि हमेशा खुला रहता है में दृश्य के एल डालने की विचार की तरह ... अगर मैं कर सकते हैं ' मैं जिस तरह से करना चाहता हूं, वैसे ही क्या मैं ऊपर दिखाया गया तरीका है? धन्यवाद!

Answer 1

आप का उपयोग करते हैं .html(dom_object):

$(this.el).find('#current_tab').empty().append(this.widgets_view.el); 

और empty:

इस तरह से डेटा और ईवेंट हैंडलर्स के रूप में अन्य निर्माणों को हटा

$(this.el).find("#current_tab").html(this.widgets_view.el); 

आप वास्तव में यह कर रहे हैं तत्वों को स्वयं हटाने से पहले बाल तत्व [स्मृति रिसाव से बचने के लिए]

तो एक बार आपके द्वारा जोड़ी गई कहते हैं,, #current_tab के लिए और फिर .html(this.foobars_view.el), widgets_view.el पर घटनाओं चले गए हैं। आपका .html कॉल पहली बार ठीक काम करता है क्योंकि #current_tab में कुछ भी नहीं है, इसलिए कोई भी ईवेंट अनबिंड नहीं है।

आप घटनाओं rebind करने मिश्रण में सरल delegateEvents कॉल जोड़कर अपने "विचारों का पुन: उपयोग" दृष्टिकोण का उपयोग कर सकते हैं:

activateWidgets: function(){ 
    if(!(this.widgets_view)){ 
    this.widgets_view = new WidgetsView(); 
    this.widgets_view.render(); 
    } 
    $(this.el).find("#current_tab").html(this.widgets_view.el); 
    this.widgets_view.delegateEvents(); // <--------------- you need this 
} 

जबकि मैं यहाँ हूँ, आप this.$('#current_tab') बजाय $(this.el).find('#current_tab') और this.$el बजाय उपयोग कर सकते हैं $(this.el) का।

डेमो: http://jsfiddle.net/ambiguous/75KuW/1/

ध्यान दें कि ऊपर में टैब स्विचिंग <input type="text"> तत्वों की सामग्री को बरकरार रखता है। यदि आपको उस तरह के व्यवहार की आवश्यकता नहीं है तो आप शायद सभी विचारों को रखने और उन्हें अंदर और बाहर स्वैप करने के बजाय आवश्यकतानुसार दृश्यों को हटाने और तत्काल बंद करने से बेहतर हो सकते हैं।

इसके अलावा, यदि आपके WidgetsView (और दोस्तों) के अंदर अन्य बैकबोन दृश्य हैं, तो आपको निहित दृश्यों पर delegateEvents पर कॉल करना होगा। इस मामले में, विचारों पर bind_events विधि में किसी प्रकार का कोई मतलब होगा:

this.widgets_view.rebind_events(); // delegateEvents() all the way down this view subtree