Backbone, no envoltura “this.el”

Hago un uso extenso de plantillas , y me gusta utilizar plantillas completas . Quiero decir que quiero ver en el código de la plantilla todos los elementos del DOM, incluido el de la raíz , así:

 <div class="card box" id="card-"> 

Pero lo que le gusta a Backbone es tener una plantilla como esta:

  

Y definir el elemento raíz y sus atributos en el código JS. Lo que pienso es feo y confuso.

Entonces, ¿hay alguna forma de evitar mi Vista Backbone para envolver mi plantilla con un elemento DOM adicional?

He estado revisando este tema: https://github.com/documentcloud/backbone/issues/546 y entiendo que no hay una forma oficial de hacerlo … pero tal vez me recomiendes de manera no oficial.

Puede aprovechar view.setElement para representar una plantilla completa y usarla como elemento de vista.

setElement view.setElement (elemento)
Si desea aplicar una vista Backbone a un elemento DOM diferente, use setElement, que también creará la referencia $ el en caché y moverá los eventos delegates de la vista desde el elemento anterior al nuevo

Dos puntos que debes contabilizar:

  1. setElement llama a undelegateEvents , cuidando los eventos de visualización, pero tenga cuidado de eliminar todos los demás eventos que pueda haber configurado usted mismo.
  2. setElement no inyecta el elemento en el DOM, tienes que manejarlo tú mismo.

Dicho eso, tu vista podría verse así

 var FullTemplateView = Backbone.View.extend({ render: function () { var html, $oldel = this.$el, $newel; html = /**however you build your html : by a template, hardcoded, ... **/; $newel = $(html); // rebind and replace the element in the view this.setElement($newel); // reinject the element in the DOM $oldel.replaceWith($newel); return this; } }); 

Y un ejemplo de trabajo para jugar con http://jsfiddle.net/gNBLV/7/

Ahora también puede definir tagName de una vista como una función y crear una clase como esta:

 var MyView = Backbone.View.extend({ template: '#my-template', tagName: function() { // inspect the template to retrieve the tag name }, render: function() { // render the template and append its contents to the current element } }); 

Aquí hay un ejemplo de trabajo

Backbone.Decarative.Views le proporciona una forma alternativa de hacerlo, sin tener que depender de setElement . Para más, mira mi respuesta aquí .