[Tutorial] Comenzado con MVVM y Knockout.js

Hola que tal? Desde hace un tiempo ya tenía ganas de escribir sobre MVVM, no soy para nada un experto, simplemente quiero compartir mi proceso de aprendizaje.

Existen excelente artículos excelente sobre MVVM, espero que los puedas ver:

http://geeks.ms/blogs/etomas/archive/2012/07/31/y-el-combate-se-decidi-243-por-ko-i.aspx

¿Cómo funciona MVVM?

La idea es simple y buena, tener un modelo exclusivo para la capa de presentación, quizás sin quererlo ya habías hecho en algún momento algo parecido. El viewModel es “ModeloVista” que se adapta a las necesidades de la capa de presentación, muchas veces, existe un ViewModel específico para cada vista. Por otro lado vamos a tener el modelo que nos provee desde alguna fuente, los datos necesarios para “alimentar” nuestro viewModel.

 

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.

image

¿Donde entra Knockout.js en todo esto?

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ódigo del Ejemplo
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <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:

image

Y listo!, el resultado es:

image

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>
        <meta charset="utf-8" />
        <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>

image

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 Smile

Nos vemos en otro artículo!,

Saludos,

@chalalo

10 comentarios en “[Tutorial] Comenzado con MVVM y Knockout.js”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *