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




backbone-views (4)

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


एमयू बहुत छोटा है बिल्कुल सही है:

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

और यह समझना आसान है क्यों, दृश्य के _setElement फ़ंक्शन को देखें :

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

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

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');
}

अधिक जानने के लिए मैंने लिखा एक व्यापक उत्तर देखें।


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

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

this.el मूल डीओएम तत्व है, जो jQuery द्वारा छेड़छाड़ नहीं किया गया है।


आइए कहें कि आप ऐसा करते हैं

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,

इसके साथ

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.

एक HTML तत्व है और दूसरा तत्व का jQuery ऑब्जेक्ट है।


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

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





backbone-views