В чем разница между $el и el в Backbone.вид на JS?

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

4 55
javascript backbone.js backbone-views

4 ответа:

допустим, что вы делаете это

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 элемента.

78

му слишком коротка правильно:

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

и это легко понять, почему, посмотрите на вид _setElement функции:

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

посмотреть обширный ответ!--13--> я написал, чтобы узнать больше.

4

короче говоря, el дает вам доступ к элементам HTML DOM, т. е. вы можете ссылаться и обращаться к ним, тогда как $el-это оболочка jQuery вокруг el.

$el не только предоставляет доступ к конкретному элементу DOM, но и действует как селектор jQuery, и у вас есть привилегия использовать функции библиотеки jQuery, такие как show (), hide () и т. д. на конкретном элементе DOM.

1

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

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

this.el является родным элементом DOM, нетронутым jQuery.

0