Quais são el e $ el na visão do backbone? - javascript, backbone.js, zepto

Estou tentando evitar quebra automática de div quando renderiza a exibição no backbone. Eu faço isso com o seguinte código

this.$el.replaceWith(this.template(this.model.attributes));
return this;

mas fico div vazio quando anexo essa visualização

$("#product-pannel").append(productsView.render().el);

alguém dê a solução assim

render: function(){
var html = this.template(this.model.toJSON()));
var newElement = $(html)
this.$el.replaceWith(newElement);
this.setElement(newElement);
return this;
}

mas não consigo entender por que devo fazer isso tão complicadamente acima alguém pode me dizer o mistério de el a $el?

Respostas:

el aponta para o elemento view (aquele que mantém o restante do modelo) e $el é um objeto jQuery que representa el elemento Para que você não precise fazer $(this.el) o tempo todo.

Isso é claramente mencionado na documentação.

Você pode especificar um elemento DOM existente como o elemento view usando el opção ou backbone cria um elemento DOM para cada visualização. Por padrão, este será um <div>. Se você não quer um espaço vazio <div>, personalize o elemento que o backbone cria como o elemento de nível superior do seu modelo de visualização usando opções como tagName, attributes etc.

setElement é para alterar dinamicamente o elemento view para outra coisa ... Eu raramente (ou nunca) viu realmente sendo usado.