ToDo Persistente

Implementacion de persistencia.

Tomaremos la aplicacion ToDo que hicimos y haremos que almacene nuestra lista.

Para esto, inauguramos la prueba 9:

phonegap create prueba9 --id com.coderhouse.prueba9 --name "00 Prueba 9" -src templates\todo

o, si quieren usar su propia aplicacion de referencia:

phonegap create prueba9 --id com.coderhouse.prueba9 --name "00 Prueba 9" -src prueba8

Implementacion

Para implementar localStorage debemos localizar en el codigo donde escribimos la lista y como obtenerla antes de arrancar la aplicacion.

A los efectos practicos, seguiremos almacenando nuestra lista en la variable todo.list, pero cada vez que haya un cambio, escribiremos una copia en localStorage.

Inicializacion

Nota de inicializacion de paginas

Por cada pagina que definimos jQuery Mobile emitira un evento de inicializacion de esa pagina. De esta forma podemos escuchar el evento y ejecutar rutinas:

$('#id-de-pagina').on('pageinit', function() {
//este evento solo se dispara una vez por cada pagina
//por lo que es ideal para tareas de configuracion
});

Nuestra aplicacion se inicializa cuando se jQuery inicializa la pagina #index. Podemos ver nuestro codigo de inicializacion en estas lineas (alrededor de la linea 44 de todo.js):

// Inicializar la pagina principal
$('#index').on('pageinit', function() {
    console.log('index.pageinit');

    // Crear una lista (array)
    // Deberiamos corregir este codigo
    // por uno que lea los datos de *localStorage*
    todo.list = [];
    $('#add').on('click', todo.add);
    $('#task_list').on('click', 'li a', function() {
        todo.selected = $(this).data('task-id');
    });
    // Actualizar la lista siempre antes de mostrar #index
    $('#index').on('pagebeforeshow', todo.refresh_list);
});

Ahora bien, ahi es cuando inicializamos, pero tambien tenemos que interceptar los cambios en la lista. Estos cambios suceden con todo.add y todo.remove y ambos llaman al metodo refresh_list. De esta manera siempre pasamos por refresh_list y es ahi donde deberiamos actualizar nuestra lista en localStorage:

/** Re-crear la lista desde los valores del array */
todo.refresh_list = function() {
    var $tasks = $('#task_list'), i;
    // Clear the existing task list
    $tasks.empty();
    if (todo.list.length) {
        // Agregar encabezado
        $tasks.append('<li data-role="list-divider">Pendientes</li>');
        for (var i=0;i<todo.list.length;i++){
            // Agregar cada tarea
            var li = '<li><a data-task-id="' + i
                    + '" href="#confirm">' + todo.list[i] + '</a></li>'
            $tasks.append(li);
        }
    }
    // guardar todo.list en localStorage.todo_list
    
    // actualizar el listado
    $tasks.listview('refresh');
};