Backbone.js ejemplo de vista de colección usando una plantilla de marioneta

marionette backbone.js-collections

Question

¿Podría por favor sugerirme algún ejemplo para mostrar la vista de lista a través del sistema de plantillas de marionetas? Básicamente, tengo una plantilla de marionetas y, según la plantilla, estoy creando una lista de tablas.

Answer 1

Para crear una lista de filas de tablas con Backbone Marionette, deberá definir cinco cosas:

• Un modelo para cada fila.
• Una colección para contener todos los modelos de fila.
• Un CollectionView para iterar a través de la colección.
• Un ItemView para proporcionar funcionalidad específica de fila
• Una plantilla para el ItemView que proporciona el marcado para cada fila

Caso de uso de muestra

Digamos que tienes los siguientes datos:

var stooges = [{ name: ''moe'', age: 44, userid: 1}, 
               { name: ''larry'', age: 44, userid: 2}, 
               { name: ''curly'', age: 44, userid: 3}];

Definir un modelo y colección.

Para los siguientes datos querrías tener un modelo:

var StoogeModel = Backbone.Model.extend({});

donde puede configurar algunos valores predeterminados razonables para sus datos y otras propiedades, como idAttribute . Hay muchas referencias sobre cómo personalizar su modelo. Su colección debe, como mínimo, tomar el stoogeModel .

var StoogeCollection = Backbone.Collection.extend({
  model: StoogeModel
});

Configura tus puntos de vista

Para iterar y representar su colección en una tabla, todo lo que necesitará es un CollectionView y un ItemView .

var StoogesCollectionView = Backbone.Marionette.CollectionView.extend({
  tagName: "table",
  childView: StoogeItemView
});

Todas las childView CollectionViews necesitan, como mínimo, una vista childView que sea una ItemView (que definimos a continuación) que usarán para derivar la funcionalidad para crear el html para cada fila, y una collection que es la colección que contiene los modelos que llenan cada fila. Pasaremos esta colección cuando instacemos un stoogesCollectionView . La propiedad tagName le dice a Backbone que encapsule los hijos en una etiqueta de table .

var StoogeItemView = Backbone.Marionette.ItemView.extend({
  tagName: "tr",
  template: ''#stooge-template''
});

<script type="text/template" id="stooge-template">
  <td id="name"><%= name %></td>
  <td id="age"><%= age%></td>
  <td id="userid"><%= userid%></td>
</script>

Todas las ItemViews requieren una plantilla que definimos en nuestro documento HTML, aquí está #stooge-template . Si ItemView es un elemento secundario de una colección, no tiene que definir su modelo, será proporcionado por CollectionView principal. El HTML StoogeItemView por cada hijo StoogeItemView será encapsulado por etiquetas tr , porque lo que queremos es una fila para cada hijo de la vista de colección.

Desde ItemView puede manejar eventos en el nivel de "fila", como click o focus en una columna de fila. También puede manejar los cambios en el modelo que se pasó. Además, desde ItemView puede decidir pasar ayudantes que pueden manipular la forma en que se muestran los datos en su plantilla.

Poniendolo todo junto

Ahora hemos definido nuestro modelo, colección, vista de colección, vista de elemento secundario y la plantilla de vista de elemento. A continuación, vamos a conectar todas estas piezas.

Rellena tu colección

Pasas la matriz de títeres al constructor de tu colección.

var myStooges = new StoogeCollection(stooges);

Estos se forman en modelos, y cargan su colección.

Mejora tu CollectionView

Pasas tu colección cargada a tu vista de colección.

var myStoogesView = new StoogesCollectionView({ collection: myStooges  });

Render tu vista

Todas las vistas de Marionette vienen empaquetadas con un método de render . En nuestro caso, invocando.

myStoogesView.render();

creará una <table> con tres elementos <tr> , cada uno con una columna para los campos de name , age y userid en nuestro conjunto de datos. Para insertar el HTML resultante en el DOM, simplemente usamos la propiedad el la vista. Para simplificar, podemos inyectar la vista directamente en el cuerpo.

document.body.appendChild(myStoogesView.el);

o usando jQuery:

$(document.body).append(myStoogesView.el);

Mas alla de este ejemplo

Hay mucha funcionalidad que ni siquiera comenzamos a discutir. ¡Lee los docs ! Y echa un vistazo a los muchos muchos tutoriales. Espero que esta breve introducción ayude!