¿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 losdata-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
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-bindpara vicular atributos de html con propiedades del view-model o para iterar como el caso dedata-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-binddelformindica que cuando se haga un submit de este form, se ejecute el métodoaddde nuestro view-model y que losdata-bindinternos del form trabajan con el objetonewItemde nuestro view-model - El
data-binddelinput id="new_name"está indicando que la propiedad relacionada con elvaluede ese input esname. ¿de quien?, si, denewItem
y por último, veamos como iterar en un array de items:
- en primer lugar podemos ver la propiedad
lengthbindeada al contenido del elementospan. - luego, podemos observar un elemento
ulcuyodata-bindnos dice que va a recorrer el arrayarticlesde nuestro view-model. - ahora bien, dentro de cada
livamos a tener 2 elementos de tipospanque van a estar relacionados con las propiedadesnameystockde la misma manera que elspananterior pero con la salvedad que estos están vinculados a cada elemento del array que estamos iterando. También tendremos 2 elementos de tipobuttony, como podemos intuir deldata-bindcuando se presionen invocarán a los métodosset_currentyremovede 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;
};
