Backbone: Por que atribuir `$ (‘# footer’)` a `el`?

Eu encontrei as seguintes declarações:

el: '#footer'

var todosView = new TodosView({el: $('#footer')});

Por que atribuir $('#footer') a el ? Isso é o que realmente me confundiu. Eu li o post aqui, Qual é a diferença entre $ el e el em vistas Backbone.js? , ainda confuso.

Além disso, eu li: A view.$el propriedade é equivalente a $(view.el) e view.$(selector) é equivalente a $(view.el).find(selector) . No método de renderização do nosso exemplo TodoView, vemos this.$el usado para definir o HTML do elemento e this.$() Usado para localizar subelementos da class ‘edit’.

Mas, alguém disse: Se você chamar $(this.el) , você simplesmente continuará executando o seletor jquery para obter o mesmo object jquery. ‘$ el’ é a versão em cache de $(this.el)

O que é “versão em cache”?

Qual é a diferença entre $el e el ?

A propriedade view el

this.el pode ser resolvido a partir de uma string do seletor DOM ou de um Element; caso contrário, ele será criado a partir das propriedades tagName , className , id e attributes da view. Se nenhum for definido, this.el é um div vazio, que geralmente está bem.

É uma referência de object do elemento DOM. Não defina el diretamente , use o método view.setElement vez disso, se desejar alterá-lo.

A propriedade $el

Um object jQuery em cache para o elemento da visualização. Uma referência útil em vez de re-envolver o elemento DOM o tempo todo.

Eu gosto de como o usuário mu é muito curto coloca :

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

Também não defina $el diretamente, use o método view.setElement .

A opção el

Uma referência el também pode ser passada para o construtor da visão.

 new Backbone.View({ el: '#element' }); new Backbone.View({ el: $('#element') }); // unecessary 

Ele sobrescreve a propriedade el , que é então usada para a propriedade $el .

Se uma sequência de seletores for passada, ela será substituída pelo elemento DOM que ela representa.

Por que atribuir $('#footer') a el?

this.el pode ser um object jQuery. Você pode ver que o Backbone se certifica de que el é um elemento DOM e que $el é um object jQuery dele na function _setElement :

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

Isso mostra porque this.$el equivale a $(this.el) .

Mas o que é o Backbone.$ ?

O backbone mantém uma referência ao que quer que seja $ .

Para propósitos do Backbone, jQuery, Zepto, Ender ou My Library (brincadeira) possui a variável $ .

No nosso caso, $ é jQuery, então Backbone.$ É apenas jQuery, mas as dependencies do Backbone são flexíveis:

A única dependência difícil do Backbone é Underscore.js (> = 1.8.3). Para persistência RESTful e manipulação de DOM com Backbone.View , inclua jQuery (> = 1.11.0) e json2.js para suporte a Internet Explorer mais antigo. (Mimics of the Underscore e jQuery APIs, como Lodash e Zepto , também tendem a funcionar, com diferentes graus de compatibilidade.)

this.$(selector) é equivalente a $(view.el).find(selector)

Na verdade, é um pouco mais eficiente , a function $ view é apenas:

 $: function(selector) { return this.$el.find(selector); }, 

O que é um object jQuery em cache?

Neste caso, significa apenas que um object jQuery é mantido dentro de uma variável, que é reutilizada dentro da visão. Isso evita a operação dispendiosa de encontrar o elemento com $(selector) cada vez.

Você pode (e deve) usar essa pequena otimização sempre que possível, como dentro da function render :

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

Prefixar a variável de object em cache do jQuery com $ é apenas um padrão, não um requisito.


O código-fonte do Backbone tem menos de 2000 linhas, é bem documentado e fácil de ler. Eu recomendo a todos que mergulhem nele para entender facilmente a lógica subjacente.

Eles também oferecem uma página de origem anotada que é ainda mais fácil de ler.

Leitura adicional

  • Comece aqui: Documentação de backbone
  • Introdução ao backbone
  • Padrões de backbone
  • Melhores práticas com o Backbone