Sự khác nhau giữa $ el và el trong số lần xem Backbone.js là gì?

Question

Bạn có thể cho biết sự khác biệt giữa $el và el trong chế độ xem Backbone.js không?

Answer 1

cho phép nói rằng bạn làm điều này

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, 

với điều này

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. 

là một trong những yếu tố html và người kia là đối tượng jQuery của nguyên tố này.

Answer 2

Đó là quá muộn để trả lời nó, nhưng -> this.$el là một tài liệu tham khảo đến phần tử trong bối cảnh của jQuery, thường để sử dụng với những thứ như .html() hoặc .addClass() vv Ví dụ, nếu bạn có một div với id someDiv và bạn đặt nó vào el tài sản của quan điểm Backbone, thông báo sau đều giống hệt nhau:

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

this.el là phần tử DOM bản địa, không bị ảnh hưởng bởi jQuery.

Answer 3

mu is too short là chính xác đúng:

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

Và thật dễ dàng để hiểu lý do tại sao, nhìn vào view's _setElement function:

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

này đảm bảo rằng el luôn a là Phần tử DOM và $el luôn là đối tượng jQuery của nó. Vì vậy, sau đây là hợp lệ mặc dù tôi đã sử dụng một đối tượng jQuery như el tùy chọn hoặc tài sản:

var myView = new Backbone.View({ el: $('.selector') }); 
// or 
var MyView = Backbone.View.extend({ 
    el: $('.selector') 
}); 

một đối tượng jQuery cache là gì?

Đó là một đối tượng jQuery được lưu giữ bên trong một biến cho mục đích tái sử dụng. Nó tránh các hoạt động tốn kém của việc tìm kiếm các yếu tố với một cái gì đó như $(selector) mỗi lần.

Dưới đây là một ví dụ:

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

Xem một extensive answer Tôi đã viết thư cho biết thêm.

Answer 4

Tóm lại, el cung cấp cho bạn quyền truy cập vào các phần tử HTML DOM, tức là bạn có thể tham chiếu và truy cập chúng, trong khi $ el là trình bao bọc jQuery quanh el.

$ el không chỉ cung cấp quyền truy cập vào phần tử DOM cụ thể, hơn nữa nó hoạt động như bộ chọn jQuery và bạn có đặc quyền sử dụng các hàm thư viện jQuery như show(), hide(), v.v ... trên phần tử DOM cụ thể.