Conceptos básicos sobre Knockout, como Observables y Bindings. Librería que permite crear interfaces web usando el patron de diseño MVVM

1. Introducción a KNOCKOUT
Oscar Gensollen Arroyo
Arquitecto de Software
Consultor Senior
www.formativa.com.pe
oscar.gensollen@formativa.com.pe
@oscargensollen

2. 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.

3. ¿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.

4. Aplicacion knockoutjs típica
 Lado Cliente (MVVM):
 View(s) -> Bindings
 Model(s) -> Observables
 ViewModel(s) -> Funciones
 Lado Servidor:
 Endpoints RESTful
JSON

5. Componentes de Knockout
View ModelViewModel
Data-binding

6. 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

7. 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.

8. 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(…
};

9. 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>

10. 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’);

11. 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.

12. Observables Simples
var ProductoViewModel = {
Color: ko.observable(‘Azul’),
Precio: ko.observable()
};

13. 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.

14. 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>

15. 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.

16. 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 }”>

17. 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>

18. 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>

19. 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>

20. 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>

21.  Charla (grabación):
https://www.dropbox.com/sh/khkz88ys9ybcu82/fg-yKFB2ST
 Demos (jsfiddle.net):
 a. Bindings simples y computed
http://jsfiddle.net/ogensollen/Jk5nv/
 b. Agregar elementos a una coleccion
http://jsfiddle.net/ogensollen/qswVR/1/
 c. Campos de formulario
http://jsfiddle.net/ogensollen/Kp8bz/
 d. Caso: reservaciones
http://jsfiddle.net/ogensollen/6muue/4/
 e. Caso: lista de contactos
http://jsfiddle.net/ogensollen/GRy86/1/
 Oscar Gensollen Arroyo
Arquitecto de Software
Consultor Senior
www.formativa.com.pe
oscar.gensollen@formativa.com.pe
@oscargensollen