viernes, 22 de marzo de 2013

Convertir en observable los elementos de un array con Knockout

Este tutorial knockout javascript es una continuación de Tutorial ejemplo Arrays observables con Knockout Javascript. En el anterior tutorial lo que hacíamos era crear un array observable con knockout en el que añadíamos y eliminábamos elementos (Ver ejemplo).

Lo que vamos a hacer ahora es poder modificar esos elementos que añadíamos, es decir, haremos observables todos los elementos que se encuentren dentro de nuestro array observable. (Ver resultado final)



 En nuestro modelo.js, creábamos el array de la siguiente manera:


self.usuarios = ko.observableArray([
    { id: 1, nombre: "Pablo", aficion: "Futbol" },
    { id: 2, nombre: "Sergio", aficion: "Bicicleta" },
    { id: 3, nombre: "Cristina", aficion: "Tenis" }
]);


ahora, lo que queremos es hacer observable el nombre e id, por lo que lo crearemos así:



self.usuarios = ko.observableArray([
    { id: 1, nombre: ko.observable("Pablo"), aficion: ko.observable("Futbol") },
    { id: 2, nombre: ko.observable("Sergio"), aficion: ko.observable("Bicicleta") },
    { id: 3, nombre: ko.observable("Cristina"), aficion: ko.observable("Tenis") }
]);




En la tabla que cargábamos todos los elementos del array, añadiremos al lado de nombre y afición un input para poder modificar los atributos. La carga de la tabla (en arrayTabla.html) quedará de la siguiente manera:


<table border="1"> <tr> <td>Id</td><td>Nombre</td><td>Moficicar nombre</td><td>Aficion</td><td>Moficicar afición</td> </tr><br/> <tbody data-bind="foreach: usuarios"> <tr> <td data-bind="text: $data.id"></td> <td data-bind="text: $data.nombre"></td> <td><input type="text" data-bind="value: $data.nombre"/></td> <td data-bind="text: $data.aficion"></td> <td><input type="text" data-bind="value: $data.aficion"/></td> </tr> </tbody> </table>

Si entras ahora al archivo arrayTabla.html podrás modificar los nombres y aficiones cambiando el valor de los inputs.

Lo que nos queda es modificar nuestra función que añadía nuevos usuarios con sus aficiones. Anteriormente teníamos la función:


self.nuevoObjeto=function(){
 var nombreUsuario=$('#nombre_usuario').val();
 var aficionUsuario=$('#aficion_usuario').val();

 var pos=self.usuarios().length-1;
 var ultimaId=self.usuarios()[pos].id;
 var idUsuario=ultimaId+1;
 self.usuarios.push({id:idUsuario,nombre:nombreUsuario,aficion:aficionUsuario});

}


Lo que tenemos que hacer es convertir los atributos en observables, de modo que la función quede así:




self.nuevoObjeto=function(){
 var nombreUsuario=$('#nombre_usuario').val();
 var aficionUsuario=$('#aficion_usuario').val();

  var pos=self.usuarios().length-1;
 var ultimaId=self.usuarios()[pos].id;
 var idUsuario=ultimaId+1;
 self.usuarios.push({id:idUsuario,nombre:ko.observable(nombreUsuario),aficion:ko.observable(aficionUsuario)});
}



De esta manera podríamos añadir un nuevo usuario vacio con la afición vacía y luego cambiarlo mediante su input correspondiente.

No hay comentarios:

Publicar un comentario