Подтвердить что ты не робот

В чем разница между $el и el в образах Backbone.js?

Можете ли вы рассказать разницу между $el и el в образах Backbone.js?

4b9b3361

Ответ 1

позволяет сказать, что вы это делаете

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.

one - это элемент html, а другой - объект jQuery элемента.

Ответ 2

mu слишком коротко в точности:

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

И легко понять, почему, посмотрите view _setElement function:

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

Это гарантирует, что el всегда является элементом DOM и что $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');
}

См. расширенный ответ Я написал, чтобы узнать больше.

Ответ 3

Это так поздно ответить, но → this.$el является ссылкой для элемента в контексте jQuery, как правило, для использования с такими вещами, как .html() или .addClass() и т.д. Например, если у вас есть div с id someDiv и вы устанавливаете его в свойство el представления Backbone, следующие утверждения идентичны:

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

this.el - это собственный элемент DOM, не затронутый jQuery.