Introducción a KNOCKOUT

Oscar Gensollen Arroyo

Arquitecto de Software

Consultor Senior

www.formativa.com.pe

oscar.gensollen@formativa.com.pe

@oscargensollen

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.

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

Aplicacion knockoutjs típica

Lado Cliente (MVVM):

View(s) -> Bindings

Model(s) -> Observables

ViewModel(s) -> Funciones

Lado Servidor:

Endpoints RESTful

JSON

Componentes de Knockout

View ModelViewModel

Data-binding

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

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.

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(…

};

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>

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

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.

Observables Simples

var ProductoViewModel = {

Color: ko.observable(‘Azul’),

Precio: ko.observable()

};

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.

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>

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.

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

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>

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>

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>

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>

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

oscar.gensollen@formativa.com.pe

@oscargensollen