javascript Backbone.js 视图中的 $el 和 el 有什么区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16646526/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the difference between $el and el in Backbone.js views?
提问by ali asad
Can you please tell the difference between $eland elin Backbone.js views?
你能说出Backbone.js 视图中$el和之间的区别el吗？
回答by Rayweb_on
lets say that you do this
让我们说你这样做
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,
with this
有了这个
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 is the html element and the other is the jQuery object of the element.
一个是 html 元素，另一个是元素的 jQuery 对象。
回答by Emile Bergeron
mu is too shortis exactly right:
mu 太短是完全正确的：
this.$el = $(this.el);
this.$el = $(this.el);
And it's easy to understand why, look at the view's _setElementfunction:
很容易理解为什么，看看视图的_setElement功能：
_setElement: function(el) { this.$el = el instanceof Backbone.$ ? el : Backbone.$(el); this.el = this.$el[0]; },
_setElement: function(el) { this.$el = el instanceof Backbone.$ ? el : Backbone.$(el); this.el = this.$el[0]; },
This ensures that the elproperty is always a DOM element, and that the $elproperty is always a jQuery object wrapping it. So the following is valid even though I used a jQuery object as the eloption or property:
这确保该el属性始终是一个 DOM 元素，并且该$el属性始终是一个包裹它的 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')
});
What is a cached jQuery object?
什么是缓存的 jQuery 对象？
It's a jQuery object assigned to a variable for reuse purpose. It avoids the costly operation of finding the element through the DOM with something like $(selector)each time.
它是一个 jQuery 对象，分配给一个变量以供重用。它避免了$(selector)每次通过 DOM 查找元素的代价高昂的操作。
Here's an example:
下面是一个例子：
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');
}
See an extensive answerI wrote to know more.
查看我写的广泛答案以了解更多信息。
回答by Sourabh Bhavsar
In short, el gives you access to HTML DOM elements, i.e you can refer and access them, whereas $el is jQuery wrapper around el.
简而言之，el 使您可以访问 HTML DOM 元素，即您可以引用和访问它们，而 $el 是围绕 el 的 jQuery 包装器。
$el not only provides access to particular DOM element, moreover it acts as a jQuery selector and you have privilege to use jQuery library functions like show(), hide(), etc on the particular DOM element.
$el 不仅提供对特定 DOM 元素的访问，而且它充当 jQuery 选择器，您有权在特定 DOM 元素上使用 jQuery 库函数，如 show()、hide() 等。
回答by Samin Fakharian
It is so late to answer it but -->
this.$elis a referenceto the element in the context of jQuery, typically for use with things like .html()or .addClass(), etc.
For example, if you had a div with id someDiv, and you set it to the elproperty of the Backbone view, the following statements are identical:
现在回答它太晚了，但是 -->
this.$el是对 jQuery 上下文中元素的引用，通常用于诸如.html()or 之类的东西.addClass()。例如，如果您有一个带有 id someDiv 的 div，并且您将其设置为Backbone 视图的el属性，以下语句相同：
this.$el.html() $("#someDiv").html() $(this.el).html()
this.elis the native DOM element, untouched by jQuery.
this.el是原生 DOM 元素，未受 jQuery 影响。
