Backbone.js विचारों में $ el और el के बीच क्या अंतर है?

Question

क्या आप बैकबोन.जेएस विचारों में $el और el के बीच अंतर बता सकते हैं?

Answer 1

कहना की सुविधा देता है कि आप इस

var my$el = this.$el; // you will have the element but 
         //with all of the functions that jQuery provides like, 
         //hide,show etc, its the equivalent of $('#myel').show(); 
         //$('#myel').hide(); so this.$el keeps a reference to your 
         //element so you don't need to traverse the DOM to find the 
         // element every time you use it. with the performance benefits 
         //that this implies. 

एक साथ इस

var myel = this.el; // here what you have is the html element, 
        //you will be able to access(read/modify) the html 
        //properties of this element, 

कर एचटीएमएल तत्व है और अन्य तत्व की jQuery वस्तु है।

Answer 2

यह जवाब देने के लिए इतनी देर हो चुकी है, लेकिन -> this.$el, आम तौर पर .html() या .addClass(), आदि उदाहरण के लिए की तरह चीजों के साथ प्रयोग के लिए, jQuery के संदर्भ में एक संदर्भ तत्व है अगर आप था आईडी someDiv साथ एक div, और आप रीढ़ देखने के एल संपत्ति के लिए सेट, निम्नलिखित बयानों समान हैं:

this.$el.html() $("#someDiv").html() $(this.el).html() 

this.el देशी डोम तत्व, jQuery से अछूता है।

Answer 3

mu is too short बिल्कुल सही है:

this.$el = $(this.el); 

और यह क्यों समझने के लिए, view's _setElement function को देखो आसान है:

_setElement: function(el) { 
    this.$el = el instanceof Backbone.$ ? el : Backbone.$(el); 
    this.el = this.$el[0]; 
}, 

यह सुनिश्चित करता है कि el हमेशा एक है डीओएम तत्व, और $el हमेशा इसका एक jQuery ऑब्जेक्ट है। तो निम्नलिखित भले ही मैं el विकल्प या संपत्ति के रूप में एक jQuery वस्तु इस्तेमाल किया मान्य है:

var myView = new Backbone.View({ el: $('.selector') }); 
// or 
var MyView = Backbone.View.extend({ 
    el: $('.selector') 
}); 

एक कैश्ड jQuery वस्तु क्या है?

यह पुन: उपयोग उद्देश्य के लिए एक चर के अंदर रखा गया एक jQuery ऑब्जेक्ट है। यह प्रत्येक बार $(selector) जैसे तत्व को ढूंढने के महंगा संचालन से बचाता है।

यहाँ एक उदाहरण है:

render: function() { 
    this.$el.html(this.template(/* ...snip... */)); 
    // this is caching a jQuery object 
    this.$myCachedObject = this.$('.selector'); 
}, 

onExampleEvent: function(e) { 
    // avoids $('.selector') here and on any sub-sequent example events. 
    this.$myCachedObject.toggleClass('example'); 
} 

एक extensive answer मैं और अधिक जानना लिखा देखें।

Answer 4

संक्षेप में, एल आपको HTML DOM तत्वों तक पहुंच प्रदान करता है, यानी आप उन्हें संदर्भित और एक्सेस कर सकते हैं, जबकि $ el एल के आसपास jQuery wrapper है।

$ el न केवल विशेष डीओएम तत्व तक पहुंच प्रदान करता है, इसके अलावा यह एक jQuery चयनकर्ता के रूप में कार्य करता है और आपको विशेष DOM तत्व पर शो(), hide(), आदि जैसे jQuery लाइब्रेरी फ़ंक्शंस का उपयोग करने का विशेषाधिकार है।