KnockoutJS-PrimerEjemplo

Knockout.
js
Hagamos nuestro primer ejemplo, para ello construyamos una simple página html con el
siguiente código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Primer ejemplo de KnockoutJS</title>
<script src="knockout-2.2.1.js"></script>
</head>
<body>
Nombre:
<input data-bind="value: nombre" type="text" />
Primer apellido
<input data-bind="value: apellido" type="text" />
<hr>
Su nombre completo es <span data-bind="text: nombreCompleto" />
<script>
function ViewModel() {
var self = this;
self.nombre = "Rubén";
self.apellido = "Spagnuolo";
self.nombreCompleto = ko.computed(function () {
return self.nombre + ' ' + self.apellido;
});
}
// Activamos knockout.js
ko.applyBindings(new ViewModel());
</script>
</body>
</html>
Si bien este es un ejemplo muy sencillo, podemos ver ya la estructura de una página hecha con
KnockoutJS: Vemos que nuestros elementos html tienen el atributo data-bind. En el caso de
los dos input type=text usamos el binding value y en el caso del span usamos el binding
text
El binding value enlaza el atributo value del elemento del DOM (en nuestro caso, los
dos input type=text) con una propiedad en nuestro view model. Esto es tipicamente usados
con elementos como <input type="text" />, <select> y <textarea>
El binding text causa que el elemento DOM asociado muestre el valor del texto de su
parámetro. Típicamente esto es útil con elementos como <span> o <em> que tradicionalmente
muestran texto, pero puede usarse con cualquier otro elemento.
Vemos que hacemos una referencia al script knockout.js que tenemos que bajar del sitio
web con el código:
<script src="knockout-2.2.1.js"></script>
Luego, escribimos nuestro código knockout, dentro de otra etiqueta script, donde definimos
primero nuestro ViewModel con tres propiedades:
 nombre, asignándole el valor "Rubén"
 apellido, asignándole el valor "Spagnuolo"

 nombre completo que definimos como un computed observable o sea una función que depende de
uno o más propiedades (en nuestro caso de las dos anteriores: nombre y apellido) y que se actualizan
automáticamente cuando una de sus dependencias cambia.
Como vemos en la figura 1, al correr la página obtenemos la salida esperada, es decir, en el

span se escribe el nombre completo:
Figura 1 - Salida de la pagina al ser vista con Internet Explorer
Sin embargo, tal como está hecha nuestra primera página, si editamos el nombre y el apellido,
veremos que el nombre completo no cambia.. y esto.. ¿ a qué se debe?: La respuesta es que
en nuestro ViewModel hemos definido tanto a nombre como a apellido como una variable
normal.. Para que se haga la magia del binding, debemos cambiar el código de nuestras dos
propiedades para definirlos usando dos observables como sigue:
self.nombre = ko.observable("Rubén");
self.apellido = ko.observable("Spagnuolo");
y el código de nuestra propiedad nombre completo como sigue:

self.nombreCompleto = ko.computed(function () {
return self.nombre() + ' ' + self.apellido;
});
Un observable es un tipo especial de objeto JavaScript que puede notificara los suscriptores
acerca de los cambios, y puede automáticamente detectar dependencias.
Como se ve, cuando hacemos referencia a una propiedad observable la debemos llamar como
a una funcion, es decir con los paréntesis: self.nombre()
Ahora al cambiar los valores de los dos input text, y perder el foco, vemos que el texto del span
cambia de acuerdo con los cambios, como se ve en la figura 2:
Figura 2 - Al cambiar el nombre y/o el apellido, y perder el foco, el texto del span cambia.
Activando KnockoutJS: como vemos en el código de nuestro script, al finalizar el mismo, debemos
activar KnockoutJS para que se produczca el binding con nuestro ViewModel. Esto lo hacemos con
el código siguiente:
ko.applyBindings(new ViewModel());
descargas
Obtener la versión más reciente producción estable de Knockout.js:
Descargar
v3.4.2 - min 25kb + gz
notas de la versión
También disponible: generación de depuración . Nota: Esto sólo se diseñó para ayudarle a entender
cómo funciona el golpe de gracia. No lo utilice para el desarrollo normal de aplicación, ya que expone las
API privadas sin soporte adicional.
Cenador
Knockout está disponible a través de la glorieta gestor de paquetes. Más información sobre
el uso y la instalación de Bower en http://bower.io . Para añadir golpe de gracia a su
aplicación, puede ejecutar:
bower
install
knockout
Además, puede incluir la --saveopción de añadir nocaut a su bower.jsonarchivo.

Instalación
Basta con hacer referencia al archivo JavaScript utilizando una <script>etiqueta en
alguna parte de sus páginas HTML. Por ejemplo,
<script
type='text/javascript'
src='knockout-
3.4.2.js'></script>
Por supuesto, actualizar el srcatributo para que coincida con el lugar donde se coloca el
archivo descargado. A continuación, si usted es nuevo en nocaut, empezar con los cursos
interactivos , ver algunos ejemplos en vivo , o cavar en la documentación sobre los
observables .
Redes de distribución de contenidos (CDN)
Para dar a sus usuarios la mayor velocidad de descarga, en su lugar podría preferir hacer
referencia knockout.jsa uno de los siguientes CDN de terceros:
 CDNJS ( sobre )
 Versión 3.4.1 nocaut
 Microsoft Ajax CDN ( aproximadamente )
 Versión 3.4.1 nocaut
Archivo de todas las versiones
 v3.4.2 ( depuración ) - 6 de marzo de, 2017
 v3.4.1 ( depuración ) - 7 de noviembre el año 2016
 v3.4.0 ( depuración ) - 16 noviembre el año 2015
 Candidato v3.4.0 Release ( depuración ) - Octubre 12ª, el año 2015
 v3.3.0 ( depuración ) - Febrero 18va, el año 2015
 v3.2.0 ( depuración ) - Agosto 12ª, 2014
 Beta v3.2.0 ( depuración ) - Junio 19na, 2014
 v3.1.0 ( depuración ) - 4 ° de marzo de, 2014
 Beta v3.1.0 ( depuración ) - Febrero 12ª, 2014
 v3.0.0 ( depuración ) ( Notas de actualización ) - 25to de octubre de, 2013
 Candidato v3.0.0 Release ( depuración ) - 30o de septiembre de, 2013
 Beta v3.0.0 ( depuración ) - 9 ° de julio de, 2013
 v2.3.0 ( depuración ) - 9 ° de julio de, 2013
 Candidato v2.3.0 Release ( depuración ) - Junio 20o, 2013
 v2.2.1 ( depuración ) - decimoquinta de enero de, 2013
 v2.2.0 ( depuración ) - 28a de octubre de, 2012
 Candidato v2.2.0 Release ( depuración ) - 1º de octubre de, 2012
 v2.1.0 ( depuración ) - el 7 de mayo de, 2012
 Candidato v2.1.0 Release 2 ( depuración ) - Abril 25o, 2012
 Candidato v2.1.0 Release ( depuración ) - Abril décima octava, 2012
 Beta v2.1.0 ( depuración ) - 23ro de marzo de, 2012
 v2.0.0 ( depuración ) - 21 de de diciembre de, 2011
 Candidato v2.0.0 Release ( depuración ) - 14o de diciembre de, 2011
 Beta v1.3.0 ( depuración ) - 30mo de agosto de, 2011
 v1.2.1 ( depuración ) - Mayo 22o, 2011
 v1.2.0 ( depuración ) - Abril 27a, 2011
 v1.1.2 ( depuración ) - 1 de Enero, 2011
 v1.1.1 ( depuración ) - 5 ° de noviembre de, 2010
 v1.1.0 ( depuración ) - Octubre decima novena, 2010
 v1.0.5 ( depuración ) - 24ST de agosto de 2010
 v1.0.4 ( depuración ) - Agosto 12ª, 2010
 v1.0.3 ( depuración ) - trigésima de julio de, 2010
 v1.0.2 ( depuración ) - Julio 22a, 2010
Archivos relacionados
 jquery.tmpl ( depuración ) - el viejo plugin de jQuery a veces se utiliza con versiones
anteriores de Knockout.js. Este enfoque de la plantilla es obsoleta desde Knockout
v2.0.0.
Un elemento importante en este modelo es el binding, que permite unir

uni o bidireccionalmente ciertos atributos y/o métodos del viewmodel a
elementos del DOM, de esta manera, y utilizando el patrón observador,
podemos tener sincronizado la vista con el viewModel con un mínimo
esfuerzo.
¿ D O N D E EN T R A KN OC K O U T . JS E N T O D O ES T O?
Knockout.js es una biblioteca javascript, que nos ayuda a implementar

este modelo MVVM. Dentro de las características especiales, tal cual
indica en su página, nos permite:
 Realizar Binding Declarativos
 Resfresco automático de los elementos del UI, como decía, cuando se
actualiza el modelovista, nuestra UI se actualiza automáticamente
 Tracking de Dependencias, detecta los cambios realizados en la vista o
en el modelo y es capaz de propagarlos .
 Plantillas, permite generar rapidamente plantillas en función de los
datos del modelovista.
Además, tal como indica la página es totalmente libre, open source,
totalmente construido sobre javascript, funciona con cualquier
framework adicional, es bastante liviano, solo 40k minimizado, no tiene
dependencias , soporte para IE6+, Firefox 2+.Chrome, Opera y Safari
(versión móvil y de escritorio) y totalmente documentada.
Veamos nuestro primer ejemplo, siguiendo la documentación

en: http://knockoutjs.com/documentation/observables.html#mvvm_and_
view_models
Para el ejemplo voy a utilizar WebMatrix, para mi uno de los mejores
editores de código grátis disponible, entonces voy a descargar la
biblioteca y manos a la obra
C Ó D I G O DE L E J E M P LO
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript" src="js/knockout-2.1.0.js"></script>
</head>
<body>
<h1>Ejemplo MVVM</h1>
<ul>
<li>El nombre es <span data-bind="text:nombre"></span></li>
<li>El apellido es <span data-bind="text:apellidos"></span></li>
<li>El edad es <span data-bind="text:edad"></span></li>
</ul>
<script type="text/javascript">
var PersonaViewModel = {
nombre: "Juan Pablo
apellidos: "Pérez Nuñez",
edad: 1
};
ko.applyBindings(PersonaViewModel);
</script>
</body>
</html>
Revisemos un poco el código antes de continuar, puedes ver que
construimos un objeto javascript que tiene 3 atributos, estos atributos se
van a bindear a los elementos span que tienen el tag data-bind , el cual,
si bien no es nativo de html5, es compatible con él.
Luego, y para realizar el binding, debemos invocar el metodo
applyBindings de la biblioteca, pasandole como argumento nuestro
ViewModel.
Algo muy bueno es que al momento de escribir nuestro código javascript

con WebMatrix podemos ver que nos sugiere que propiedades enlazar:
Y listo!, el resultado es:
Como puedes ver se ha hecho el render en tags span con el atributo data-
bind, ahora veamos un ejemplo con binding bidireccional, para eso
vamos a incluir un input text, de manera que al escribir y/o cambiar la
edad sobre este elemento, se modifique de manera inmediata el
ViewModel.
Para esto tenemos que hacer la propiedad del ViewModel observable,

esto lo logramos modificando la propiedad edad y agregando en input
type con el data-bind:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript" src="js/knockout-2.1.0.js"></script>
</head>
<body>
<h1>Ejemplo MVVM</h1>
<ul>
<li>El nombre es <span data-bind="text:nombre"></span></li>
<li>El apellido es <span data-bind="text:apellidos"></span></li>
<li>El edad es <span data-bind="text:edad"></span></li>
</ul>
<input data-bind="value:edad" type="number">
<script type="text/javascript">
var PersonaViewModel = {
nombre: "Juan Pablo",
apellidos: "Pérez Nuñez",
edad: ko.observable(1)
};
ko.applyBindings(PersonaViewModel);
</script>
</body>
</html>
Y todo funcionando tal cual queremos, cada vez que aumentas o

disminuyes la edad, automáticamente se está actualizando al información
del viewModel.
Bueno, ese ha sido nuestra pequeña introducción, voy a ir agregando
nuevos tutoriales, que forman parte de mi proceso de aprendizaje
Nos vemos en otro artículo!,
Saludos,
@chalalo

KnockoutJS-PrimerEjemplo

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

KnockoutJS-PrimerEjemplo

Cargado por

Copyright:

Formatos disponibles

Knockout.

 nombre, asignándole el valor "Rubén"

 apellido, asignándole el valor "Spagnuolo"

automáticamente cuando una de sus dependencias cambia.

Como vemos en la figura 1, al correr la página obtenemos la salida esperada, es decir, en el

Figura 1 - Salida de la pagina al ser vista con Internet Explorer

y el código de nuestra propiedad nombre completo como sigue:

Además, puede incluir la --saveopción de añadir nocaut a su bower.jsonarchivo.

Un elemento importante en este modelo es el binding, que permite unir

Knockout.js es una biblioteca javascript, que nos ayuda a implementar

Veamos nuestro primer ejemplo, siguiendo la documentación

Algo muy bueno es que al momento de escribir nuestro código javascript

Y listo!, el resultado es:

Para esto tenemos que hacer la propiedad del ViewModel observable,

Y todo funcionando tal cual queremos, cada vez que aumentas o

Nos vemos en otro artículo!,

También podría gustarte