Uso de Knockout para crear aplicaciones de internet enriquecidas

Knockout es una biblioteca JavaScript que sirve muy bien para crear aplicaciones de internet enriquecidas (Rich Internet Applications) ya que permite el desarrollo de interfaces de usuario utilizando programación dirigida por eventos en aplicaciones Web.

A continuación pongo un ejemplo sencillo que podría ser parte de un sistema más grande como una aplicación de control escolar, la página muestra una lista desplegable con los nombres de los alumnos y al seleccionar uno, se muestra su matrícula en el campo del lado izquierdo; también funciona en sentido inverso, es decir, si el usuario teclea la matrícula correspondiente a un alumno, la lista desplegable muestra el nombre del alumno al que le corresponde esa matrícula.

ejemplo_knockout

Adicionalmente, el usuario tiene opción para agregar más alumnos a la lista, indicando su matricula y su nombre. Para el ejemplo utilizo JQuery 1.11 y Knockout 3.0.

El archivo html quedaría de la siguiente forma

Archivo ejemplo_ko.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sistema de control escolar KO</title>

<script type='text/javascript' src='jquery-1.11.0.min.js'></script>
<script type='text/javascript' src='knockout-3.0.0.js'></script>
<script type='text/javascript' src="ejemplo.js"></script>

</head>
<body>
     <input maxlength=5 size=5 data-bind="value: busca_matricula">
     <select maxlength=30 data-bind="options: alumnos, optionsText: 'nombre', optionsValue: 'matricula', value: busca_matricula, optionsCaption: 'Seleccione alumno'">
     </select>
     <br><br>
     Matricula <input maxlength=5 size=5 data-bind="value: nueva_matricula">
     Nombre <input maxlength=30 size=30 data-bind="value: nuevo_nombre">
     <input type="button" value="Agregar Alumno" data-bind="click: agregaAlumno">
</body>
</html>]

En el archivo ejemplo.js pondremos el código correspondiente a la función agregaAlumno, que deseamos que se ejecute cuando el usuario haga click en el botón con la leyenda Agregar Alumno, así como un arreglo con una lista de alumnos inicial.
Deseamos que el código de JavaScript se ejecute hasta que el documento html esté cargado por completo, por lo que todo nuestro código irá dentro de la función $(document).ready
Vamos a utilizar “objetos” de un tipo llamado Alumno, cada objeto de este tipo, tendrá dos atributos: matrícula y nombre. Los objetos los crearemos mediante una función que recibirá como parámetros la matrícula y el nombre del alumno.

function Alumno(matricula, nombre) {
    this.matricula = matricula;
    this.nombre = nombre;
}

Después definimos nuestro modelo de vista (ViewModel) en donde declaramos un arreglo que utilizaremos para almacenar los objetos del tipo Alumno; de entrada agregamos 3 alummnos al arreglo

self.alumnos = ko.observableArray([
            new Alumno(100, "FERNANDA"),
            new Alumno(175, "ANTONIO"),
            new Alumno(203, "JOSE LUIS")
        ]);

Después declaramos en nuestro modelo una propiedad de tipo observable, y la ligaremos al campo que el usuario utilizará en nuestro archivo html para buscar un alumno por su matrícula.
self.busca_matricula = ko.observable();

El que una propiedad de nuestro modelo de vista sea observable significa que knockout estará “monitoreando” esta propiedad y actualizará nuestro archivo html cada vez que el valor de dicha propiedad cambie.

Declaramos una propiedad más, que utilizaremos para indicar qué matrícula tendrá un alumno nuevo que deseemos agregar al arreglo alumnos
self.nueva_matricula = ko.observable();

La última propiedad que declararemos es para indicar el nombre de un alumno nuevo que deseemos agregar al arreglo alumnos
self.nuevo_nombre = ko.observable();

Por último, creamos la función agregaAlumno que nos sirve para agregar alumnos al arreglo alumnos.

self.agregaAlumno = function() {
         nuevoAlumno = new Alumno(
                                  parseFloat(this.nueva_matricula()),
                                  this.nuevo_nombre()
                                 );
         self.alumnos.push(nuevoAlumno);
    };

El archivo ejemplo.js completo queda así

$(document).ready(function() {

function Alumno(matricula, nombre) {
    this.matricula = matricula;
    this.nombre = nombre;
}

function AlumnosViewModel() {
    var self = this;
    self.alumnos = ko.observableArray([
            new Alumno(100, "FERNANDA"),
            new Alumno(175, "ANTONIO"),
            new Alumno(203, "JOSE LUIS")
        ]);
    self.busca_matricula = ko.observable();
    self.nueva_matricula = ko.observable();
    self.nuevo_nombre = ko.observable();
    
    self.agregaAlumno = function() {
         nuevoAlumno = new Alumno(
                                  parseFloat(this.nueva_matricula()),
                                   this.nuevo_nombre()
                                 );
         self.alumnos.push(nuevoAlumno);
    };
}

ko.applyBindings(new AlumnosViewModel());

});

Obviamente en una aplicación real los datos para el arreglo se llenarían desde una tabla de la base de datos de la aplicación, faltaría hacer varias validaciones como no dejar que agregue un alumno si no ha indicado la matrícula y el nombre, etc. este es un ejemplo para que se den una idea de lo que se puede hacer con Knockout

Etiquetas: , ,

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s


A %d blogueros les gusta esto: