在Backbone.js视图中,$el和el有什么区别?

lc8prwob  于 2022-11-10  发布在  其他
关注(0)|答案(4)|浏览(139)

您能在Backbone.js视图中分辨出$elel之间的区别吗?

4xrmg8kj

4xrmg8kj1#

"el"  is HTMLElement
"$el" is 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对象。

brc7rcf0

brc7rcf02#

沐太短完全正确:

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

原因很容易理解,看一下视图的_setElement函数:

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

这确保了el属性始终是一个DOM元素,并且$el属性始终是一个 Package 它的jQuery对象。因此,即使我使用jQuery对象作为el选项或属性,以下代码仍然有效:

// Passing a jQuery object as the `el` option.
var myView = new Backbone.View({ el: $('.selector') });
// Using a jQuery object as the `el` View class property
var MyView = Backbone.View.extend({
    el:  $('.selector')
});

什么是缓存的jQuery对象?

它是一个jQuery对象,被赋给一个变量以供重用,它避免了每次通过DOM查找类似$(selector)的元素的代价高昂的操作。
下面是一个例子:

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

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

看我写的extensive answer了解更多。

pgpifvop

pgpifvop3#

简而言之,el允许您访问HTML DOM元素,即您可以引用和访问它们,而$el是el的jQuery Package 器。
$el不仅提供了对特定DOM元素的访问,而且它还充当了jQuery选择器,您有权对特定DOM元素使用jQuery库函数,如show()、hide()等。

i7uq4tfw

i7uq4tfw4#

现在回答这个问题已经太晚了,但是--〉this.$el是一个引用jQuery上下文中的元素,通常用于.html().addClass()等。例如,如果有一个id为someDiv的div,并将其设置为 Backbone.js 视图的el属性,则以下语句是相同的:

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

this.el是原生的DOM元素,jQuery没有涉及它。

相关问题