Facilitando el data-binding con Alloy: Parte 2

En la primera parte de esta serie, vimos cómo utilizar el framework MVC de Titanium Alloy, con su data-binding integrado de Backbone.js, para enlazar fácilmente los datos a las vistas con un código mínimo.https://codigomovil.mx/admin/blog

Este post asume que has seguido la Parte 1 que utilizaba una librería ficticia para generar modelos y colecciones. Si usas las definiciones de modelo Alloy "stock", las cosas son un poco diferentes. Cubriré los beneficios y diferencias de ambos en la Parte 3

Eso está genial para las listas, pero ¿qué pasa con las vistas "detalladas" - donde quieres mostrar una sola instancia de un modelo en una vista/controlador?

Tradicionalmente en Titanium, podrías hacer algo como esto:

Alloy.createController("detailView", data).getView().open();

Donde data es el valor u objeto que deseas pasar, luego en el controlador detailView podrías hacer lo siguiente (asumiendo que data contenía un objeto con propiedades):

$.firstName.value = $.args.firstName;
$.lastName.value = $.args.lastName;

Está bien, por supuesto, pero te obliga a enlazar manualmente los datos en el controlador para cada elemento en la vista - y eso significa escribir más JavaScript.

Alloy proporciona una forma mucho más sencilla de hacer esto al pasar un modelo en sí y luego enlazarlo usando el data-binding integrado de Alloy, lo que significa que se necesita poco o ningún JavaScript.

Para usar esto, se utiliza un parámetro especial $model al pasar los datos al controlador. Entonces, por ejemplo, si has obtenido un modelo de una TableView con:

function onClick(e) {
  Alloy.createController("detailView", {
    $model: Alloy.Collections.contacts.at(e.index)
  }).getView().open();
}

Dependiendo de cómo hayas creado tus modelos y controladores (por ejemplo, si los has creado fuera de la carpeta de definiciones de modelo normales), es posible que necesites hacer un .transform() en el modelo antes de pasarlo al controlador.

En este caso, harías lo siguiente:

function onClick(e) {
  let model = Alloy.Collections.contacts.at(e.index);
  model.transform();
  Alloy.createController("detailView", {
    $model: model
  }).getView().open();
}

En este ejemplo, se llama a un método de transformación contra el modelo, lo que básicamente hace un toJSON() en el modelo y expone los datos en la propiedad _transform.

Si tus modelos admiten/tienen una función de transformación, eso es todo lo que necesitas hacer. Si no es así, necesitarías agregar esto manualmente para que creara la propiedad JSON por ti.

Con esto en su lugar, la vista detallada en sí solo tiene que contener XML estándar que mapea las propiedades del modelo a la vista:

<Window>
  <View layout="vertical">
    <View>
      <Label class="caption">Nombre</Label>
      <TextField value="{firstName}"/>
    </View>

    <View>
      <Label class="caption">Apellido</Label>
      <TextField value="{lastName}"/>
    </View>
  </View>
</Window>

El ejemplo anterior es indicativo - se ha omitido algo de estilo.

Si quieres acceder al modelo en sí mismo en el código del controlador, puedes hacerlo referenciando:

let firstName = $model.toJSON().firstName;

Tan simple como eso - data-binding en vistas detalladas fácil con Alloy.

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