Introducción a Knockout

732 views

Published on

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

Published in: Software
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
732
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Introducción a Knockout

  1. 1. Introducción a KNOCKOUT Oscar Gensollen Arroyo Arquitecto de Software Consultor Senior www.formativa.com.pe oscar.gensollen@formativa.com.pe @oscargensollen
  2. 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. 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. 4. Aplicacion knockoutjs típica  Lado Cliente (MVVM):  View(s) -> Bindings  Model(s) -> Observables  ViewModel(s) -> Funciones  Lado Servidor:  Endpoints RESTful JSON
  5. 5. Componentes de Knockout View ModelViewModel Data-binding
  6. 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. 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. 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. 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. 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. 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. 12. Observables Simples var ProductoViewModel = { Color: ko.observable(‘Azul’), Precio: ko.observable() };
  13. 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. 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. 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. 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. 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. 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. 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. 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. 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

×