Primero pasos con Knockout

Luego de varios comentarios positivos sobre este framework y de ver que ya viene incluido en asp.net mvc4, decidí darle un vistazo a knockout 2.0, como resultado de estas pruebas podría decir que knockout me parece muy útil cuando queremos hacer una aplicación web con bastante comportamiento del lado del cliente (browser), es decir, cuando queremos que el armado de la vista (html) sea responsabilidad del cliente (browser) y no tanto del servidor.

¿Que aporta knockout la programación?

Si bien para tener vistas mas dinámicas me alcanzaba con jquery, el aporte del knockout está en no tener que manipular el DOM artesanalmente sino que de eso se encarga knockout en base a los data-bind que nosotros definimos.

¿Que conceptos se agregan respecto de la simple manipulación del DOM?

Se agrega el concepto de view-model observable, uno de los pilares de knockout (sinó "el" pilar).

Ejemplo completo

Descargar

Este ejemplo utiliza mongolab y funciona simplemente abriendo el html desde el filesystem con un browser, no necesita hosting del sitio web (a los fines didáctico).

Para configurar mongolab, siga los pasos descriptos en readme.txt

Conceptos claves

• Separar correctamente lo que corresponde a la vista de lo que corresponde al view-model
• Utilizar los data-bind para vicular atributos de html con propiedades del view-model o para iterar como el caso de data-bind="foreach: articles"
• Todo lo que queremos que se actualice 'automáticamente' debe ser ko.observable(...), ya sean objetos, propiedades, arrays

Analizando algunos fragmentos de código

Para inicializar todos nuestros bindings, tenemos que ejecutar ko.applyBindings luego de que se cargó nuestra página:

Para relacionar un objeto de nuestro view-model con los elementos html debemos utilizar los data-bind, por ejemplo:

donde:

• El data-bind del form indica que cuando se haga un submit de este form, se ejecute el método add de nuestro view-model y que los data-bind internos del form trabajan con el objeto newItem de nuestro view-model
• El data-bind del input id="new_name" está indicando que la propiedad relacionada con el value de ese input es name. ¿de quien?, si, de newItem

y por último, veamos como iterar en un array de items:

• en primer lugar podemos ver la propiedad length bindeada al contenido del elemento span.
• luego, podemos observar un elemento ul cuyo data-bind nos dice que va a recorrer el array articles de nuestro view-model.
• ahora bien, dentro de cada li vamos a tener 2 elementos de tipo span que van a estar relacionados con las propiedades name y stock de la misma manera que el span anterior pero con la salvedad que estos están vinculados a cada elemento del array que estamos iterando. También tendremos 2 elementos de tipo button y, como podemos intuir del data-bind cuando se presionen invocarán a los métodos set_current y remove de nuestro view-model (y no del elemento que estamos iterando, para eso es el $parent)

Y... ¿el view-model?

Ahora veremos algunos fragmentos que considero importantes del view-model, pero pueden verlo completo bajándose el ejemplo.

Aquí podemos observar como creamos el view-model (self) creando articles como un array observable y newItem como un objeto observable. Luego definimos length como una propiedad computable.

function articulos() {
    var self = { };
    self.articles = ko.observableArray();
    self.newItem = ko.observable();

    self.length = ko.computed(function() {
        return self.articles().length;
    });

Aquí podemos observar la definición de add, el parámetro f es el form involucrado, las primeras líneas son para validarlo (jquery.validation), luego tomamos el action definido en el form asumiendo que ese es el nombre de la colección a la que queremos agregar el nuevo elemento y llamamos a hacer un $.post con self.newItem() como contenido y, de resultar exitoso el POST, se agrega la respuesta (data) a la colección de articles, previo crearla como observable.

self.add = function(f) {
    var form = $(f);

    var valid = true;
    if (form.valid !== undefined)
        valid = form.valid();

    if (valid === undefined || valid) {
        var collectionName = form.attr("action");

        rest.dopost(collectionName, self.newItem(), function(data) {
            self.articles.push(observableArticulo(data));
            self.reset_newItem();
            self.sort();
        });
    }
    return false;
};

Descargar ejemplo completo