web-dev-qa-db-ja.com

Backbone.jsビューの$ elとelの違いは何ですか？

Backbone.jsビューで$elとelの違いを教えてください。

javascriptbackbone.jsbackbone-views
59
ali asad

あなたがこれを行うと言うことができます

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.

1つはhtml要素で、もう1つは要素のjQueryオブジェクトです。

79
Rayweb_on

muが短すぎる は正確に正しい：

_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オプションまたはプロパティとして使用した場合でも、以下が有効です。

_// 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オブジェクトです。毎回$(selector)のようなものでDOMを介して要素を見つけるというコストのかかる操作を回避します。

以下に例を示します。

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

広範な回答 を参照してください。

6
Emile Bergeron

つまり、elはHTML DOM要素へのアクセスを提供します。つまり、それらを参照およびアクセスできますが、$ elはelのjQueryラッパーです。

$ elは特定のDOM要素へのアクセスを提供するだけでなく、jQueryセレクターとして機能し、特定のDOM要素でshow（）、hide（）などのjQueryライブラリ関数を使用する特権があります。

2
Sourabh Bhavsar

それに答えるのは遅すぎますが、-> this.$elは、jQueryのコンテキスト内の要素への参照であり、通常.html()や.addClass()など。たとえば、id someDivのdivがあり、それをBackboneビューのelプロパティに設定した場合、次のステートメントは同じです。

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

this.elはネイティブのDOM要素で、jQueryによって変更されません。

1
Samin Fakharian