Backbone.js视图中$ el和el有什么区别？

你能告诉在Backbone.js意见中$el和el的区别吗？

Answer 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. 

一个是html元素，另一个是元素的jQuery对象。

Answer 2

亩太短是完全正确的：

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

什么是caching的jQuery对象？

这是一个jQuery对象保存在一个variables的重用目的。 它避免了每次使用类似$(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'); } 

看到我写了更多的广泛的答案 。

Answer 3

回答这个问题已经太晚了，但是 – > this.$el是jQuery上下文中对元素的引用 ，通常用于诸如.html()或.addClass()类的东西。例如，如果你有一个与ID someDiv的div，并将其设置为骨干视图的el属性，以下语句是相同的：

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

this.el是原生的DOM元素，不受jQuery触动。