Facilitando el data-binding con Alloy: Parte 1

Con el framework MVC de Titanium Alloy, los desarrolladores pueden aprovechar el data-binding integrado usando Backbone.js, lo que hace que la vinculación de datos a las vistas sea increíblemente fácil.

Tradicionalmente en Titanium, podrías vincular algunos datos a una TableView de la siguiente manera:

let rows = [];
let tableView = Ti.UI.createTableView();

myArrayOfData.forEach(item => {
  let row = Ti.UI.createTableViewRow();

  let thumb = Ti.UI.createImageView({
    left: 10,
    width: 40,
    height: 40,
    image: item.thumbnailUrl
  });

  let label = Ti.UI.createLabel({
    left: 60,
    text: item.title,
    width: Ti.UI.SIZE,
    height: Ti.UI.SIZE
  });

  row.add(thumb);
  row.add(label);
  rows.push(row);
});

tableView.setData(rows);

En este ejemplo, estamos creando una instancia de Ti.UI.TableView y luego iterando un array de datos (que aquí suponemos que contiene objetos con una propiedad thumbnailUrl y title), creando un Ti.UI.TableViewRow, Ti.UI.Label y Ti.UI.ImageView, y agregando la imagen y la etiqueta a la fila.

Finalmente, metemos la fila en un array de filas y luego después del bucle, aplicamos los datos a la TableView.

Sé que una ListView es más eficiente y es la forma preferida de trabajar con datos tabulares - cubriré las ventajas y desventajas de las ListViews en otro post. Para los propósitos de este post, estamos usando un ejemplo de TableView.

¿Cuál es el problema con este enfoque?

En primer lugar, se está escribiendo mucho código, y más código significa más posibilidades de cometer errores, tener problemas de rendimiento, pérdidas de memoria, sin mencionar archivos más grandes para navegar y depurar.

En segundo lugar, si estamos haciendo esto en un proyecto Alloy, no estamos aprovechando las diseños XML y TSS para dar estilo a nuestros elementos, lo que significa que estamos repitiendo el código para la posición, el estilo, las fuentes, etc.

Por supuesto, podrías usar Alloy para mover la TableViewRow a su propia vista, luego usar Alloy.createController dentro del bucle para crear una instancia de esa vista, hacer la vinculación de los valores manualmente en el controlador de TableViewRow. Esto sería más estilo-Alloy y usaría TSS, XML, etc. correctamente, pero sigue siendo más archivos, más código y posibles problemas en el futuro, especialmente si estás trabajando con múltiples tablas en tu aplicación.

Afortunadamente, Alloy viene con soporte de Backbone.js que hace que sea muy fácil vincular datos a TableViews, ListViews y otros elementos usando un código mínimo y encajando perfectamente con el enfoque MVC de Alloy.

La implementación completa de data-binding de Alloy usa configuraciones de Model y Collection, por lo que requiere un poco de configuración, pero puedes simplificar esto creando tu propia implementación de sincronización de Backbone.

Para demostrar esto, creé una biblioteca simple llamada Mocx que está diseñada para anular la sincronización predeterminada de Backbone.js, permitiéndote crear colecciones y modelos sobre la marcha y usarlos en tus aplicaciones Alloy.

El código de la biblioteca es realmente simple:

Backbone.sync = function(method, model, options) {
  // reemplaza fetch() para desencadenar una vinculación a través de change()
  if (model instanceof Backbone.Collection) {
    console.warn("Sincronización de colección: " + method);
  } else {
    console.warn("Sincronización de modelo: " + method);
  }
  model.trigger("change");
  options.success(model.toJSON());
};

exports.createModel = function(name, attributes) {
  let model = new Backbone.Model(attributes);
  return model;
};

exports.createCollection = function(name, content) {
  if (!Alloy.Collections[name]) {
    Alloy.Collections[name] = new Backbone.Collection();
  }

  if (content instanceof Array) {
    Alloy.Collections[name].reset(content);
  } else {
    throw "No se especificó una matriz para createCollection";
  }
};

Eso es todo: agregar esto a la carpeta /lib de un proyecto Alloy y requerirlo en su proyecto significa que ahora puede crear modelos y colecciones compatibles con Alloy al vuelo desde matrices u objetos JSON. Incluso puede guardarlos y cargarlos usando Ti.App.Properties.

Tomando nuestro ejemplo original, y suponiendo que hemos agregado el archivo mocx.js a nuestra carpeta /lib de la aplicación, actualicemos alloy.js para agregar la biblioteca y una colección simulada llamada "posts":

Alloy.Globals.mocx = require("mocx");

Alloy.Globals.mocx.createCollection("posts", [{
  title: "Primer post",
  thumbailUrl: "https://someimage"
}, {
  title: "Segundo post",
  thumbailUrl: "https://someotherimage"
}]);

Ahora, en nuestra vista index.xml, podemos tener una plantilla simple para nuestra TableView:

<TableView dataCollection="posts">
  <TableViewRow>
    <ImageView class="thumbnail" image="{thumbnailUrl}"/>
    <Label class="title" text="{title}"/>
  </TableViewRow>
</TableView>

y en index.tss configuramos el estilo:

'.thumbnail': {
  left: 10,
  width: 30,
  height: 30
}

'.title': {
  left: 60,
  width: Ti.UI.SIZE,
  height: Ti.UI.SIZE
}

Finalmente, en index.js, agregamos lo siguiente:

Alloy.Collections.posts.fetch();

Lo primero que hay que tener en cuenta aquí es que ¡solo hemos escrito una línea de JavaScript para hacer la misma vinculación de datos que hicimos en el primer ejemplo!

Dado que nuestra vista ahora está en XML y nuestros estilos están en TSS, no tenemos que escribir mucho JavaScript en absoluto para vincular los datos. Además, si hacemos algún cambio en los modelos de la colección que está vinculada a la TableView, los datos se actualizarán automáticamente.

Por ejemplo, hacer lo siguiente:

Alloy.Collections.posts.at(0).set("title", "¡Título cambiado!");

Cambiará el valor de la propiedad de título en el modelo Y la fila se actualizará automáticamente en la TableView.

En publicaciones futuras, cubriré características más avanzadas de la vinculación de datos, incluidas las transformaciones y cómo renderizar fácilmente los datos del modelo en una vista detallada.

Para obtener más guías, consulte Alloy Data Binding y la documentación de backbone.js.