introducción a knockout
DESCRIPTION
Conceptos básicos sobre Knockout, como Observables y Bindings. Librería que permite crear interfaces web usando el patron de diseño MVVMTRANSCRIPT
![Page 1: Introducción a Knockout](https://reader035.vdocuments.us/reader035/viewer/2022062220/558c936cd8b42ae9098b45e1/html5/thumbnails/1.jpg)
Introducción a KNOCKOUT
Oscar Gensollen Arroyo
Arquitecto de Software
Consultor Senior
www.formativa.com.pe
@oscargensollen
![Page 2: Introducción a Knockout](https://reader035.vdocuments.us/reader035/viewer/2022062220/558c936cd8b42ae9098b45e1/html5/thumbnails/2.jpg)
Agenda
¿Qué es Knockout?
Patrón MVVM.
Creación de ViewModel y una View.
Uso de Observables simples y calculados.
Uso de Bindings
Control de texto.
Apariencia.
Formularios.
Control de flujo.
![Page 3: Introducción a Knockout](https://reader035.vdocuments.us/reader035/viewer/2022062220/558c936cd8b42ae9098b45e1/html5/thumbnails/3.jpg)
¿Qué es Knockout?
Es una librería basada en JavaScript que permite crear interfaces de rápida respuesta con un modelo limpio.
Basada en el patron MVVM en tiempo real con sintáxis declarativa.
Tres elementos fundamentales:
Observables.
Bindings.
Templating.
Es 100% lado cliente, pudiendo trabajar con cualquier tecnología del lado servidor.
Compacta (~13kb) y multinavegador (IE6+,FF2+,Chrome,Safari).
Se complementa muy bien con otras librerías como jQuery.
Ideal para UIs que se van hacienda complejas y deben adquirir comportamientos basados en datos.
No tiene dependencias.
![Page 4: Introducción a Knockout](https://reader035.vdocuments.us/reader035/viewer/2022062220/558c936cd8b42ae9098b45e1/html5/thumbnails/4.jpg)
Aplicacion knockoutjs típica
Lado Cliente (MVVM):
View(s) -> Bindings
Model(s) -> Observables
ViewModel(s) -> Funciones
Lado Servidor:
Endpoints RESTful
JSON
![Page 5: Introducción a Knockout](https://reader035.vdocuments.us/reader035/viewer/2022062220/558c936cd8b42ae9098b45e1/html5/thumbnails/5.jpg)
Componentes de Knockout
View ModelViewModel
Data-binding
![Page 6: Introducción a Knockout](https://reader035.vdocuments.us/reader035/viewer/2022062220/558c936cd8b42ae9098b45e1/html5/thumbnails/6.jpg)
Empezando con Knockout
1. Lo descargamos desde http://knockoutjs.com/downloads/index.html
2. Referenciamos la librería
CDNs
http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js
http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js
![Page 7: Introducción a Knockout](https://reader035.vdocuments.us/reader035/viewer/2022062220/558c936cd8b42ae9098b45e1/html5/thumbnails/7.jpg)
M-V-VM
Patrón de diseño para interfaces, formado por:
Un Modelo
Representa objetos y operaciones del dominio.
Independientes de la UI.
Un View Model:
Representación de código de los datos y operaciones a nivel de UI.
Son 100% JavaScript, no HTML.
Una View:
Visible e interactiva representación del estado del ViewModel.
Muestra información desde el VM, envía comandos y actualiza el estado cuando el VM cambia.
![Page 8: Introducción a Knockout](https://reader035.vdocuments.us/reader035/viewer/2022062220/558c936cd8b42ae9098b45e1/html5/thumbnails/8.jpg)
Creación de un ViewModel
Es igual a crear un Modelo, solo que adicionamos otro componente de KO que son los observables.
Ejemplo de un ViewModel:
var RegistrarClienteViewModel = {
Nombres: ko.observable(),
Apellidos: ko.observable(),
btnRegistrar: function(){
$.ajax(…
};
![Page 9: Introducción a Knockout](https://reader035.vdocuments.us/reader035/viewer/2022062220/558c936cd8b42ae9098b45e1/html5/thumbnails/9.jpg)
Creación de una View Se usa HTML normal combinado con expresiones de data-binding, empleando
el atributo “data-bind”:
<form id=“clienteForm" name=“clienteForm" method="POST">
<div>
<label class="form-label">Nombres:</label>
<input type="text" id="txtNombre"
name="txtNombre" data-bind="value:Nombre" />
</div>
<div>
<input type="button" id="btnSubmit"
value="Submit" data-bind = "click: submit" />
</div>
![Page 10: Introducción a Knockout](https://reader035.vdocuments.us/reader035/viewer/2022062220/558c936cd8b42ae9098b45e1/html5/thumbnails/10.jpg)
Activando Knockout
Se debe activar KO para que el navegador reconozca los atributos “data-bind”:
ko.applyBindings(RegistrarClienteViewModel);
La activación se puede hacer para determinada zona (divCabecera en este ejemplo):
ko.applyBindings(RegistrarClienteViewModel, document.getElementById(‘divCabecera’);
![Page 11: Introducción a Knockout](https://reader035.vdocuments.us/reader035/viewer/2022062220/558c936cd8b42ae9098b45e1/html5/thumbnails/11.jpg)
Observables
Son objetos JavaScript que notifican sobre cambios realizados sobre una determinada propiedad.
Normalmente el subscriptor principal es la View.
También pueden identificar dependencias.
Se implementan como funciones para ser compatibles con diferentes navegadores.
![Page 12: Introducción a Knockout](https://reader035.vdocuments.us/reader035/viewer/2022062220/558c936cd8b42ae9098b45e1/html5/thumbnails/12.jpg)
Observables Simples
var ProductoViewModel = {
Color: ko.observable(‘Azul’),
Precio: ko.observable()
};
![Page 13: Introducción a Knockout](https://reader035.vdocuments.us/reader035/viewer/2022062220/558c936cd8b42ae9098b45e1/html5/thumbnails/13.jpg)
Observables y Notificaciones
Los observables son “observados” mediante expresiones de enlace:
<input type=“text” id=“txtNombre” name=“txtNombre” data-bind=“text: Nombre” />
Cuando el valor de la propiedad cambia:
productoViewModel.Nombre(“Gaseosa”)
El enlace hace que el cambio se aplique en el elemento DOM correspondiente.
![Page 14: Introducción a Knockout](https://reader035.vdocuments.us/reader035/viewer/2022062220/558c936cd8b42ae9098b45e1/html5/thumbnails/14.jpg)
Observables Calculados Son funciones que dependen de uno o más observables.
Se actualizan automáticamente cuando cualquiera de las dependencias cambia.
function ProductoViewModel(){
// ...
this.NombreCompleto = ko.computed(function() {
return this.Nombre() + ‘ ‘ + this.Apellido();
}, this);
}
<span data-bind=“text: NombreCompleto”></span>
![Page 15: Introducción a Knockout](https://reader035.vdocuments.us/reader035/viewer/2022062220/558c936cd8b42ae9098b45e1/html5/thumbnails/15.jpg)
Bindings
Son expresiones que permiten enlazar un elemento del DOM o una propiedad de éste a una propiedad del ViewModel.
Se definen en el mismo elemento usando el atributo “data-bind”.
<div data-bind=“visible: mostrarMensaje></div>
Existen diferentes categorías como:
Control de texto y apariencia.
Campos de formulario.
Control de flujo.
![Page 16: Introducción a Knockout](https://reader035.vdocuments.us/reader035/viewer/2022062220/558c936cd8b42ae9098b45e1/html5/thumbnails/16.jpg)
Bindings: Control de Texto y Apariencia visible, text, html, css, style, attr
<div data-bind=“visible: mostrarMensaje></div>
<span data-bind=“text: Marca”></span>
<div data-bind=“html: detalles”></div>
<div data-bind=“css: estadoGanancia”></div>
<div data-bind=“style: { color: gananciaActual() < 0 ? ‘red’ : ‘black’ }”></div>
<a data-bind=“attr: { href: url, title: detalles }”>
![Page 17: Introducción a Knockout](https://reader035.vdocuments.us/reader035/viewer/2022062220/558c936cd8b42ae9098b45e1/html5/thumbnails/17.jpg)
Bindings: Campos de formulario (1) click, event, submit, enable, disable, value, hasFocus, checked, options,
selectedOptions, uniqueName
<button data-bind=“click: registrarProducto></button>
<div data-bind=“event: { mouseover: mostrarDetalle, mouseour: ocultarDetalle }”></span>
<form data-bind=“submit: procesarPedido”>...
<input type=“text” data-bind=“enable: tieneCelular”></input>
![Page 18: Introducción a Knockout](https://reader035.vdocuments.us/reader035/viewer/2022062220/558c936cd8b42ae9098b45e1/html5/thumbnails/18.jpg)
Bindings: Campos de formulario (2) click, event, submit, enable, disable, value, hasFocus, checked, options,
selectedOptions, uniqueName
<input type=“checkbox” data-bind=“checked: quiereRecibirBoletin”></input>
<select data-bind=“options: listaPaises, optionText: ‘nombrePais’, value: paisSeleccionado, optionsCaption: ‘Seleccione’></select>
![Page 19: Introducción a Knockout](https://reader035.vdocuments.us/reader035/viewer/2022062220/558c936cd8b42ae9098b45e1/html5/thumbnails/19.jpg)
Bindings: Control de Flujo (1)
foreach, if, ifnot, with
<table>
<thead>
<tr><th>Nombre</th><th>Apellido</th></tr>
</thead>
<tbody data-bind="foreach: clientes">
<tr>
<td data-bind="text: nombre"></td>
<td data-bind="text: apellido"></td>
</tr>
</tbody>
</table>
![Page 20: Introducción a Knockout](https://reader035.vdocuments.us/reader035/viewer/2022062220/558c936cd8b42ae9098b45e1/html5/thumbnails/20.jpg)
Bindings: Control de Flujo (2)
foreach, if, ifnot, with
<div data-bind="if: tieneBono">
Bono: <b data-bind="text: bono.Monto"> </b>
</div>
<p data-bind="with: posicion">
Latitud: <span data-bind="text: latitud"> </span>,
Longitud: <span data-bind="text: longitud"> </span>
</p>
![Page 21: Introducción a Knockout](https://reader035.vdocuments.us/reader035/viewer/2022062220/558c936cd8b42ae9098b45e1/html5/thumbnails/21.jpg)
Charla (grabación):https://www.dropbox.com/sh/khkz88ys9ybcu82/fg-yKFB2ST
Demos (jsfiddle.net):
a. Bindings simples y computedhttp://jsfiddle.net/ogensollen/Jk5nv/
b. Agregar elementos a una coleccionhttp://jsfiddle.net/ogensollen/qswVR/1/
c. Campos de formulariohttp://jsfiddle.net/ogensollen/Kp8bz/
d. Caso: reservacioneshttp://jsfiddle.net/ogensollen/6muue/4/
e. Caso: lista de contactoshttp://jsfiddle.net/ogensollen/GRy86/1/
Oscar Gensollen Arroyo
Arquitecto de Software
Consultor Senior
www.formativa.com.pe
@oscargensollen