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.
// 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')
});
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');
}
4条答案
按热度按时间4xrmg8kj1#
假设您这样做
用这个
一个是html元素,另一个是该元素的jQuery对象。
brc7rcf02#
沐太短完全正确:
原因很容易理解,看一下视图的
_setElement
函数:这确保了
el
属性始终是一个DOM元素,并且$el
属性始终是一个 Package 它的jQuery对象。因此,即使我使用jQuery对象作为el
选项或属性,以下代码仍然有效:什么是缓存的jQuery对象?
它是一个jQuery对象,被赋给一个变量以供重用,它避免了每次通过DOM查找类似
$(selector)
的元素的代价高昂的操作。下面是一个例子:
看我写的extensive answer了解更多。
pgpifvop3#
简而言之,el允许您访问HTML DOM元素,即您可以引用和访问它们,而$el是el的jQuery Package 器。
$el不仅提供了对特定DOM元素的访问,而且它还充当了jQuery选择器,您有权对特定DOM元素使用jQuery库函数,如show()、hide()等。
i7uq4tfw4#
现在回答这个问题已经太晚了,但是--〉
this.$el
是一个引用jQuery上下文中的元素,通常用于.html()
或.addClass()
等。例如,如果有一个id为someDiv的div,并将其设置为 Backbone.js 视图的el属性,则以下语句是相同的:this.el
是原生的DOM元素,jQuery没有涉及它。