बैकबोन ताज़ा घटनाएँ देखें

Question

मेरी नजर में मैं this.el क्योंकि मैं इसे dinamically बनाने की घोषणा नहीं है, लेकिन इस तरह की घटनाओं को आग नहीं है।

देखें: 1:

App.Views_1 = Backbone.View.extend({ 

    el:    '#content', 

    initialize:  function() {  
         _.bindAll(this, 'render', 'renderSingle');       
        }, 

    render:   function() {  
         this.model.each(this.renderSingle);     
        }, 

    renderSingle: function(model) { 

         this.tmpView = new App.Views_2({model: model});      
         $(this.el).append(this.tmpView.render().el); 

        } 
}); 

देखें 2:

App.Views_2 = Backbone.View.extend({ 

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

    render:   function() {  
         this.el = $('#template').tmpl(this.model.attributes);  // jQuery template       
         return this;        
        }, 

    events:   {  
         'click .button' :  'test'     
        }, 

    test:   function() {   
         alert('Fire'); 
        } 

    }); 

}); 

जब मैं पर क्लिक करें ".button" कुछ नहीं होता

इस कोड है। धन्यवाद;

Answer 1

अपने प्रस्तुत करना() विधि के अंत में, आप delegateEvents() का उपयोग करके ईवेंट rebind करने रीढ़ बता सकते हैं। यदि आप किसी भी तर्क में पास नहीं करते हैं, तो यह आपके ईवेंट हैश का उपयोग करेगा।

render:   function() {  
        this.el = $('#template').tmpl(this.model.attributes);  // jQuery template       
        this.delegateEvents(); 
        return this;        
       } 

Answer 2

Backbone.js v0.9.0 के रूप में (जनवरी 30, 2012), वहाँ एक बार देखा गया तत्व स्विच करने के लिए setElement तरीका है और घटना के प्रतिनिधिमंडल का प्रबंधन करता है।

render: function() { 
    this.setElement($('#template').tmpl(this.model.attributes)); 
    return this; 
} 

Backbone.View setElement: http://backbonejs.org/#View-setElement

setElementview.setElement (तत्व)

यदि आप कोई दूसरा DOM एलीमेंट का एक बैकबोन दृश्य लागू setElement का उपयोग करें, जो होगा करना चाहते हैं तो भी कैश की गई $ एल संदर्भ बना सकते हैं और नया करने के लिए पुराने तत्व से देखने के प्रत्यायोजित घटनाओं चलते हैं।

गतिशील रूप से इस फैशन में अपने विचार बनाने यह पक्ष-विपक्ष है है, हालांकि:

सकारात्मक:

• अपने आवेदन की HTML मार्कअप के सभी उत्पन्न होगा टेम्पलेट्स में, क्योंकि दृश्य रूट तत्वों को प्रतिपादन से लौटाए गए मार्कअप द्वारा प्रतिस्थापित किया जाता है। यह वास्तव में अच्छा है ... और जेएस के अंदर एचटीएमएल की तलाश नहीं है।
• चिंताओं का अच्छा जुदाई। टेम्पलेट्स HTML मार्कअप का 100% उत्पन्न करते हैं। दृश्य केवल उस मार्कअप के राज्य प्रदर्शित करते हैं और विभिन्न घटनाओं का जवाब देते हैं।
• प्रस्तुत करना पूरे दृश्य की निर्माण के लिए जिम्मेदार हो होने (सहित यह मूल तत्व है) तरीका है कि ReactJS घटकों renders के साथ कतार में है, इसलिए इस Backbone.Views से ReactJS घटकों के स्थानांतरण की प्रक्रिया में एक लाभकारी कदम हो सकता है ।

विपक्ष: - ये ज्यादातर नगण्य

• यह एक मौजूदा कोड के आधार पर बनाने के लिए एक दर्द रहित संक्रमण नहीं होगा रहे हैं। दृश्य को अपडेट करने की आवश्यकता होगी और सभी टेम्पलेट देखें के रूट तत्वों मार्कअप में शामिल करने की आवश्यकता होगी।
  • एकाधिक विचारों द्वारा उपयोग किए जाने वाले टेम्पलेट्स थोड़ा बालों वाली हो सकती हैं - क्या रूट तत्व सभी उपयोग मामलों में समान होगा?
• कॉल करने से पहले, दृश्य का मूल तत्व बेकार है। इसमें कोई भी संशोधन फेंक दिया जाएगा।
  • इसमें प्रतिपादन से पहले बाल दृश्य तत्वों पर कक्षा/डेटा सेट करने वाले मूल दृश्य शामिल होंगे। यह करने के लिए भी बुरा व्यवहार है, लेकिन ऐसा होता है - तत्वों को ओवरराइड करने के बाद उन संशोधनों को खो दिया जाएगा।
• जब तक आप Backbone.View निर्माता को ओवरराइड, हर दृश्य को अनावश्यक रूप से प्रतिनिधि होगा यह घटनाओं और सेट है एक मूल तत्व है कि प्रदान करने के दौरान बदल दिया है करने के लिए जिम्मेदार बताते हैं।
• यदि आपके टेम्पलेट्स में से कोई एक बच्चे, you're going have a bad time वाले एकल मूल तत्व के बजाय तत्वों की सूची में हल करता है। setElement उस सूची से पहला तत्व ले जाएगा और बाकी को फेंक देगा।
  • यहाँ, कि इस समस्या का एक उदाहरण है, हालांकि: http://jsfiddle.net/CoryDanielson/Lj3r85ew/
  • यह समस्या एक निर्माण कार्य कि टेम्पलेट्स पार्स करके वे एक ही तत्व को हल सुनिश्चित करता है के माध्यम से कम किया जा सकता है, या setElement अधिभावी और जो आने वाली सुनिश्चित करने के द्वारा element.length === 1।