Mis primero pasos con Knockout JS

Hola a todos, este es mi primer post en el blog, mi nombre es Facundo y hace mas de un año que estoy trabajando en 3f.

En este primera entrega les vengo a contar mi experiencia con Knockout JS, que en su página se presentan a ellos mismos como una librería javascript que permite crear interfaces de mostrado y edición de información dinámicas con un modelo simple que se integra en el código de la página.

Al principio puede resultar medio tedioso, pero tiene unos tutoriales muy buenos para arrancar.

Voy a mostrarles con un ejemplo muy simple, lo primero que hay que entender es que la estructura del modelo Knockout está distribuida en 2 partes:

El ViewModel:

Es donde se coloca toda la lógica de manipulación y obtención de datos.

var ViewModel = function(){
    var self = this;
    self.nombre = ko.observable("Facundo");
    self.apellido = ko.observable("Pedrazzini");
    self.seleccionado = ko.observable(false);

    self.seleccionar = function(){
        self.seleccionado(!self.seleccionado());
    };

    self.apellidoMayor = function(){
        if(self.apellido().length > 5){
            return true;
        }
        return false;
    };
};

var vm = new ViewModel();
ko.applyBindings(vm);

Linea 2. Variable “self“, se le asigna “this” para que no se confunda con el de las funciones en su interior.
Linea 3. Variable observable, esto quiere decir que si el modelo modifica la variable, esta se actualizara en todos los lugares donde se muestra.
Linea 7. Función para cambiar el valor del flag “seleccionado”.
Linea 8. Esta linea en particular tiene 2 cosas que son fundamentales al usar Knockout, el set y el get de las variables observables. Para obtener la variable “variable()”, y para asignarle un valor “variable(valor)”.
Linea 11. Función que retorna true si el apellido tiene mas de 5 caracteres.
Linea 19. Variable vm, se crea una instancia del ViewModel en una variable para poder acceder a ella desde otros lugares.
Linea 20. Se inicializa el ViewModel del knockout, en otras palabras, esta linea hace funcionar todo.

El data-bind:

Esta es la parte donde knockout se integra al html.

El data-bind es lo que relaciona toda la lógica del ViewModel con los objetos del html, y permite que estos se mantengan actualizados siempre con los cambios realizados a las variables o funciones asociadas.

</pre>
<div class="cuerpo">
<ul>
	<li data-bind="text: nombre, css:{resaltar: seleccionado}, click: seleccionar"></li>
	<li data-bind="text: apellido, css:{resaltar: apellidoMayor()}"></li>
</ul>
 <input type="text" data-bind="value: nombre" />
 <input type="text" data-bind="value: apellido" /></div>
<pre>

Como se puede ver en el ejemplo, hay distintos tipos de parámetros que se pueden aplicar dentro del data-bind:

  • text: Muestra la variable.
  • value: En un input le asigna el valor de esa variable y si es modificado, el ViewModel lo modifica automáticamente.
  • css: Lleva este formato css:{*clase*: *variable/función*}, si la variable o la función retornan true, automáticamente se le agrega la clase al objeto de html.
  • click: Ejecuta la función al hacer click.

Estas son solo algunos de los “binding” que knockout te ofrece, en la documentación se encuentran muchos más, también existe la posibilidad de crear custom bindings pero eso lo dejamos para mas adelante!


2 Responses to “Mis primero pasos con Knockout JS”

  1. Buenas, felicitaciones por el post. Te hago una pregunta, tengo el archivo .js que descargué del sitio de knockout en el Escritorio, cómo hago para referenciarlo desde el html? Pongo la ruta exacta en donde dice “src=…” pero no me lo toma. Saludos y gracias!

  2. @Fede: En general es conveniente que hagas referencia a tu servidor web (no se en dónde estás ejecutando tus pruebas), no al escritorio, pero también podés hacer referencia a los CDN de Microsoft (que son bastante más rápidos) – http://www.asp.net/ajaxlibrary/cdn.ashx#Knockout_Releases_on_the_CDN_10 – y listo.

Discussion Area - Leave a Comment