jueves, 21 de marzo de 2013

Tutorial ejemplo Arrays observables con Knockout Javascript

Programación: En este pequeño tutorial crearemos un array observable con la librería de javascript knockout e insertaremos y eliminaremos objetos del mismo.

El objetivo es crear algo como esto (abrir en nueva ventana)


El primer paso es crear nuestro arrayTabla.html importando todos los archivos necesarios. Este será el arrayTabla.html con el que yo empiece:




<!DOCTYPE HTML>
<html>
<head>
<title>Cargar Array Knockout - desarrollarAplicaciones.com</title>

<script src="librerias/jquery/jquery-1.8.2.js"></script>
<script src="librerias/knockout/knockout.js"></script>
<script type="text/javascript" src="modelo.js"></script>

</head>
<body>

</body>
</html>

He importado las librerías de jquery y knockout. También he importado un archivo modelo.js en el que meteremos nuestro modelo y aplicaremos los bindings.

Para empezar vamos a crear un array en nuestro modelo.js. El archivo quedará de la siguiente manera:


function modelo(){
var self = this;


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


//alert(self.usuarios().length);

}

$(document).ready(function(){
ko.applyBindings(new modelo());
});



Lo que tenemos en este archivo es una función modelo en la que creamos un array observable con 3 objetos que tienen id, nombre y aficion. Hacemos el applyBindings una vez se cargue todo el contenido de nuestra página arrayTabla.html.

En nuestra página arrayTabla.html vamos a cargar este array. Lo haremos en una tabla por lo que entre las etiquetas <body</body> introduciremos el siguiente código:


<table border="1">
<tr>
<td>Id</td><td>Nombre</td><td>Aficion</td>
</tr>
<br/>
<tbody data-bind="foreach: usuarios">
<tr>
<td data-bind="text: $data.id"></td>
<td data-bind="text: $data.nombre"></td>
<td data-bind="text: $data.aficion"></td>
</tr>
</tbody>
</table>

Lo que hacemos es crear una tabla con una fila principal que nos dice id, nombre y evento. Luego en tbody hacemos un foreach del array y vamos cargando en cada fila los atributos de cada objeto del array. El resultado será algo parecido a esto:
Vamos a crear un botón en el que hagamos click y nos añada un nuevo objeto al array. En el archivo modelo.js, dentro de function modelo(){ ... } añadiremos:

self.nuevoObjeto=function(){
self.usuarios.push({id:4,nombre:"Alicia",aficion:"Natacion"});
}



En arrayTabla.html crearemos un botón que llame a esta función:

<input type="button" data-bind="click: nuevoObjeto"/ value="Añadir nuevo objeto">


De esta manera cada vez que hagamos click en nuestro botón nos añadirá a nuestra tabla una nueva fila con id 4, nombre Alicia y aficion Natacion. Si hacemos click mas de una vez en el botón nos añadirá siempre el mismo objeto repetido, por lo que haremos un formulario para que sea el usuario quien introduzca los datos.

Eliminamos el botón de arrayTabla.html e insertamos el siguiente formulario:


<form>
Nombre: <input type="text" id="nombre_usuario"/><br/>
Afición: <input type="text" id="aficion_usuario"/><br/>
<input type="button" data-bind="click: nuevoObjeto" value="Añadir nuevo usuario"/>
</form>

En nuestro archivo modelo.js nuestra funcion nuevoObjeto quedará ahora de esta manera:



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 hará esta función será recuperar los valores de nombre y afición del formulario e insertarlos en un nuevo objeto. En cuanto a la id: La variables pos coge el útlimo hueco del array, de ese último hueco se coge la id y se suma 1 para que la id (aunque borremos posteriormente) no se repita nunca;


Ya tenemos un formulario para añadir nuevos objetos, ahora vamos a crear uno para eliminarlos. Para ello en nuestro arrayTabla.html introducimos el siguiente formulario:


<form>
Id del usuario que quieres eliminar: <input type="text" id="id_eliminar_usuario"/><br/>
<input type="button" data-bind="click: eliminarObjeto" value="Elimnar usuario"/>
</form>

En modelo.js añadiremos la siguiente función después de la función nuevoObjeto:



self.eliminarObjeto = function() {
var id = $('#id_eliminar_usuario').val();
self.usuarios.remove(function(usuario) {
return usuario.id == id
});
}

De esta forma ya podremos eliminar también usuarios de nuestro array.


Asi quedan nuestro dos archivos completos:

arrayTabla.html




<!DOCTYPE HTML>
<html>
<head>
<title>Ejemplos Knockout - desarrollarAplicaciones.com</title>

<script src="librerias/jquery/jquery-1.8.2.js"></script>
<script src="librerias/knockout/knockout.js"></script>
<script type="text/javascript" src="modelo.js"></script>

</head>
<body>
<table border="1">
<tr>
<td>Id</td><td>Nombre</td><td>Aficion</td>
</tr>
<br/>
<tbody data-bind="foreach: usuarios">
<tr>
<td data-bind="text: $data.id"></td>
<td data-bind="text: $data.nombre"></td>
<td data-bind="text: $data.aficion"></td>
</tr>
</tbody>

</table>
<br/>
Añadir nuevo usuario a la tabla:
<form>
Nombre: <input type="text" id="nombre_usuario"/><br/>
Afición: <input type="text" id="aficion_usuario"/><br/>
<input type="button" data-bind="click: nuevoObjeto" value="Añadir nuevo usuario"/>
</form>
<hr/>
Eliminar usuario de la tabla:
<form>
Id del usuario que quieres eliminar: <input type="text" id="id_eliminar_usuario"/><br/>
<input type="button" data-bind="click: eliminarObjeto" value="Elimnar usuario"/>
</form>
</body>
</html>





modelo.js



function modelo(){
var self = this;


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

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});

}


self.eliminarObjeto = function() {
var id = $('#id_eliminar_usuario').val();
self.usuarios.remove(function(usuario) {
return usuario.id == id
});
}
 
//alert(self.usuarios().length);

}

$(document).ready(function(){
ko.applyBindings(new modelo());
});

2 comentarios:

  1. y se puede hacer observable lo que haya dentro del array? y para añadir nombre y aficion observable?

    ResponderEliminar
    Respuestas
    1. Lo acabo de publicar: http://www.desarrollaraplicaciones.com/2013/03/convertir-en-observable-los-objetos-de.html

      saludos!

      Eliminar