Veremos que es KnockOutJs y algunos ejemplos de como utilizarlo. La página oficial tiene un tutorial muy bueno, con una curva de aprendizaje muy rápida, para aprender va perfecto ( KnockOutJs )
¿Que es?
Es un FrameWork de JavaScript, más que nada es una forma de trabajar y tratar datos. Aplica el patrón de MVVM (Model – View – ViewModel) que, básicamente, es que el Model contiene nuestro negocio y acceso a datos, y la View contiene la vista ( el código HTML/5, WPF, …).
El ViewModel es el que se encarga de «bindear» los datos de la View. Este se ocupa de ir modificando la vista para tus necesidades, está hecho en JS por lo que todo queda en el cliente y hace las llamadasa al Model. La llamada que hace al Model, solo es para obtener datos «planos», no tiene que obtener una View, ni código. Como ya he dicho, KnockOutJs es un FW de JS y te facilita la forma de aplicar este patrón, porque «bindea» automáticamente los campos de la View, solo tienes que añadir una propiedad en el control para indicarle el campo que quieres y la propiedad ( Esto ya lo veremos ).
¿Para que sirve?
Para ahorrar código. Hay bastantes cosas que te abstrae completamente, Por ejemplo, si quieres «bindear» un campo a una propiedad ahora tienes que añadir un evento de onChange en cada control que quieras, en KnockOutJs solo tienes que poner en la propiedad un «ko.observable();». Si quieres que se auto-calcule después, solo tienes que poner la función de JS entre los paréntesis de «ko.computed()».
¿Que necesitamos?
Solo necesitamos un bloc de notas y descargarnos el código de KnockOutJs. O, la alternativa es ir al tutorial y utilizar sus consolas ( tiene una de JS, otra de Html y otra que es el resultado). Para hacer el artículo utilizaré la página de KnockOutJs.
Empezamos
Primero, si tiramos con el blog de notas, creamos un directorio nuevo, para tenerlo todo organizado, y pegamos el fichero de KnockOutJs, creamos un index.html, y un indexViewModel.js.
Iremos creando una lista de la cervezas. La primera prueba, será enlazar un objeto sencillo del ViewModel, con la página html. para ello introducimos el siguiente código en el indexViewModel:
function beerViewModel() {
this.Nombre= 'Belzebuth';
this.Descripcion = 'Cerveza francesa tostada';
}
ko.applyBindings(new beerViewModel());
Como veis, solo hemos creado un objeto en el ViewModel llamado beerViewModel que tiene 2 propiedades, y después le hacemos un ko.applyBIndings(beerViewModel) para enlazarlo. ko es el namespace de KnockOutJs.
En la página html ponemos lo siguiente:
< h3>Lista de Cervezas< /h3>
Nombre:< label data-bind="text: Nombre"> < /label>
Descripcion:< label data-bind="text: Descripcion">< /label>
Aqui podemos ver que lo único diferente sería el data-bind, es la propiedad que utiliza KnockOutJs para enlazar los campos. Dentro de esta propiedad le decimos que en el atributo «text» ponga el valor de la propiedad «Nombre» de nuestro ViewModel. El data-bind se lo podemos poner a cualquier etiqueta de HTML ( p, tr, strong, etc.)
Antes de acabar veremos otro ejemplo. En el fichero beerViewModel ponemos lo siguiente:
function beerViewModel() {
this.Nombre= ko.observable("Belzebuth");
this.Descripcion = ko.observable("Cerveza francesa tostada");
}
ko.applyBindings(new beerViewModel());
Solo hemos añadido el ko.observable() y en el fichero html ponemos lo siguiente:
< h3> Lista de Cervezas < /h3> Nombre: < label data-bind="text: Nombre"> Descripcion: < label data-bind="text: Descripcion"> Nombre: < input type="text" data-bind="value: Nombre" /> Descripcion: < input type="text" data-bind="value: Descripcion" />
Ahora si modificamos el textbox se modificará automáticamente la label. Este ejemplo es muy parecido a el que tiene en el tutorial de KnockOut, pero por algún sitio se tiene que empezar…
En el siguiente artículo continuaremos con nuestro ejemplo de cervezas.