¿Cómo se crean dinámicamente los elementos de la vista Backbone?

Question

Me gustaría crear algunos elementos de vista en una aplicación Backbone js de forma dinámica. Cuando se inicializa una nueva vista, quiero que inserte el nuevo elemento en el DOM, almacene la referencia al elemento en view.el y delegue eventos de la forma habitual.

Entiendo que puedo poner en mi html, y luego configurar una vista con el: "#test" pero esto parece demasiado para los modales y otras vistas que no son centrales para la aplicación web. ¿Hay alguna forma prescrita para hacer esto que me falta en los documentos? ¿Acabo de malinterpretar cómo se supone que funcionan las vistas?

Answer 1

Una vista de red troncal generará un el para usted, sin tener que hacer nada. Por defecto, crea un <div>. Sin embargo, puede generar cualquier nombre de etiqueta que desee. Una vez que tenga la vista instanciada, implemente un método render en la vista y rellene el el con su HTML.

MyView = Backbone.View.extend({}); 

var v = new MyView(); 
console.log(v.el); // => "<div></div>" 


// define your own tag, and render contents for it 

MyTagView = Backbone.View.extend({ 
    tagName: "ul", 

    render: function(){ 
    this.$el.html("<li>test</li>"); 
    } 
}); 

var v2 = new MyTagView(); 
v2.render(); 
console.log(v2.el); // => "<ul><li>test</li></ul>" 

Es una práctica común el uso de un sistema de plantillas HTML para hacer de su vista, al igual que la plantilla Underscore.js, manillares, o cualquiera de los otros docena o más plantilla de JavaScript plantilla de motores.

Una vez que tenga el contenido generado desde la vista, debe pegarlo en el DOM en alguna parte antes de que sea visible. Esto generalmente se hace con jQuery u otro complemento:

$("#some-element").html(v2.el);