रीढ़ दृश्य घटनाओं के बाद काम नहीं करते फिर से प्रस्तुत करना

Question

मैं अपने बालों को बाहर खींच रहा हूँ, मैं माउस घटनाओं मेरी रीढ़ की हड्डी दृश्य पर काम करने के बाद दृश्य फिर से प्रदान की गई है जब तक कि मैं सबसे हास्यास्पद बात कर पाने के लिए प्रतीत नहीं कर सकते हैं:

$("a").die().unbind().live("mousedown",this.switchtabs); 

मैं वास्तव में वहाँ में यह था, लेकिन नवीनतम रीढ़ की हड्डी पर अपडेट करें और नया delegateEvents() समारोह इस्तेमाल करने की कोशिश करने का फैसला किया।

Appview/AppRouter 
    | 
    ----->PageCollection 
      | 
      ------->PageView/PageModel 
      ------->PageView/PageModel  these page view/models are not rendered 
      ------->PageView/PageModel 
      | 
      ------->PageView/PageModel 
         | 
         ----->render()  *when a pageview is rendered* 
           | 
           -----> Creates new 
            Tabcollection 
             | 
             --->TabModel/TabView <-- this is where the issue is 

क्या होता है tabcollection टैब के सभी प्रबंधन करने के लिए एक मुख्य tabview है कि है, तो प्रत्येक टैब के लिए एक नया मॉडल/दृश्य बनाता है और एक कहते हैं:

यहाँ जिस तरह से अपने प्रोजेक्ट आईडी संरचित है जब भी कोई टैब लोड होता है तो टैबव्यू को पुन: प्रस्तुत करने के लिए श्रोता। यदि टैबव्यू फिर से प्रस्तुत किया जाता है, तब तक कोई माउस ईवेंट तब तक काम नहीं करता जब तक कि मैं वहां उस अंतर्निहित jQuery कथन को नहीं डालता।

यहाँ tabview और प्रस्तुत करना (ive यह छीन नीचे काफ़ी)

var TabPanelView = Backbone.View.extend({ 
    className:  "tabpanel", 
    html:   'no content', 
    model:   null, 
    rendered:  false, 
    events:{ 
     'click a.tab-nav': 'switchtabs' 
    }, 
    initialize: function(args) 
    { 
     this.nav   = $("<ol/>"); 
     this.views   = args.items; 
     this.className  = args.classname?args.classname:"tabpanel"; 
     this.id    = args.id; 
     this.container  = $("<section>").attr("class",this.className).attr("id",this.id); 
     _.bindAll(this); 
     return this.el 
    }, 
    /* 
    This render happens multiple times, the first time it just puts an empty html structure in place 
    waiting for each of the sub models/views to load in (one per tab) 
    */ 
    render: function(args){ 
     if(!args) 
     { 
      //first render 
      var nav    = $("<aside/>").addClass("tab-navigation").append("<ol/>").attr("role","navigation"); 
      var tabcontent  = $("<section/>").addClass("tab-panels"); 
      for(i = 0;i<this.views.length;i++) 
      { 
       $("ol",nav).append("<li><a rel='"+this.views[i].id+"' href='javascript:;' class='tab-nav'></a></li>"); 
       tabcontent.append(this.views[i].el); 
      } 
      this.$el.empty().append(nav).append(tabcontent); 
     } 
     else if(args && args.update == true){ 
      // partial render -- i.e. update happened inside of child objects 
      var targetid = args.what.cid; 
      for(i = 0;i<this.views.length;i++) 
      { 
       var curcontent = this.$el.find("div#"+this.views[i].id); 
       var curlink  = this.$el.find("a[rel='"+this.views[i].id+"']") 
       if(this.views[i].cid == targetid) 
       { 
        curcontent.html($(this.views[i].el).html()); 
        curlink.text(this.views[i].model.rawdata.header); 
       } 
       if(i>0) 
       { 
        // set the first panel 
        curcontent.addClass("tab-content-hide"); 
       } 
       if(i==0) 
       { 
        curcontent.addClass("tab-content-show"); 
        curlink.addClass("tab-nav-selected"); 
       } 
       // this ridiculous piece of jQuery is the *ONLY* this i've found that works 
       //$("a[rel='"+this.views[i].id+"']").die().unbind().live("mousedown",this.switchtabs); 
      } 
     } 
     this.delegateEvents(); 
     return this; 
    }, 
    switchtabs: function(args){ 

     var tabTarget = args.target?args.target:false 
     if(tabTarget) 
     { 
      this.$el.find("aside.tab-navigation a").each(function(a,b) 
      { 
       $(this).removeClass("tab-nav-selected") 
      }) 
      $(tabTarget).addClass("tab-nav-selected"); 
      this.$el.find("div.tab-content-show").removeClass("tab-content-show").addClass("tab-content-hide"); 
      this.$el.find("div#"+tabTarget.rel).removeClass("tab-content-hide").addClass("tab-content-show"); 
     } 
    } 
}); 

किसी को भी क्यों रीढ़ माउस घटनाएँ अपने आप सब पर आग नहीं है के बारे में सोच सकते हैं, यह है क्योंकि वे डोम पर नहीं हैं ? मैंने सोचा था कि यह वह जगह थी जहां रीढ़ की हड्डी विशेष रूप से उपयोगी थी? ...

Answer 1

कोड की यह पंक्ति की संभावना आपकी समस्या है:

this.delegateEvents();

कि निकालें और इसे काम करना चाहिए।

एक बार आपको केवल delegateEvents पर कॉल करने की आवश्यकता है, तब आपके पास ऐसी घटनाएं होती हैं जिन्हें आपके दृश्य के events हैश से अलग घोषित किया जाता है। जब आप दृश्य का एक उदाहरण बनाने के रीढ़ की दृष्टि आप के लिए इस पद्धति को कॉल करेंगे।

Answer 2

जब दृश्य पुनः प्रस्तुत किया जा रहा है, तो क्या आप एक ही दृश्य का पुन: उपयोग कर रहे हैं और बस इसे फिर से प्रस्तुत करना चाहते हैं, या आप दृश्य को हटा रहे हैं और एक नया नया दृश्य बनाना?

किसी भी तरह से, ऐसा लगता है कि कारण यह है कि घटनाएँ देखें अनबाउंड दृश्य फिर से प्रदान की गई है पहले नहीं किया जा रहा है है। Derick बेली इस बारे में एक महान post है।

जब आप फिर से प्रस्तुत करना, 1) सुनिश्चित करें कि आप पुराने ध्यान में रखते हुए सभी घटनाओं निकल बनाने के लिए और 2) एक नया दृश्य बना सकते हैं और प्रस्तुत करना यह

Answer 3

जब $(el).empty() का उपयोग कर इसे चयनित तत्व में सभी बच्चे तत्वों को हटा और सभीघटनाओं को हटा (डाटा) कि किसी भी (बच्चे) के लिए बाध्य तत्वों चयनित तत्व (el) के अंदर कर रहे हैं।

करने के लिए घटनाओंबच्चे तत्वों करने के लिए बाध्य, उपयोग रखने के लिए, लेकिन अभी भी हटाने बच्चे तत्वों:

$(el).children().detach();$(.el).empty();

के बजाय इससे आपका दृश्य की घटनाओं के साथ सफलतापूर्वक rerender करने की अनुमति देगा अभी भी बाध्य और काम कर रहा है।