WebTutoriales

Empezando con KnockoutJS en Javascript

Knockout JS es una librería opensource con licencia MIT para desarrollar aplicaciones web interactivas.

En el mundo del desarrollo web, Javascript está viviendo una época dorada. Con páginas web visitadas cada vez por más usuarios, aparecen librerías y frameworks que nos facilitan la creación de aplicaciones interactivas pensadas para soportar millones de visualizaciones.

Introducción a KnockoutJS

Este artículo presenta Knockout JS (knockoutjs.com). KnockoutJS es una librería de código libre escrita en javascript que sigue el patrón de arquitectura de software Model-View-ViewModel (MVVM).

Este patrón de diseño es muy parecido al clásico Modelo-Vista-Controlador (MVC) que usan otros frameworks como Ruby on Rails, Zend Framework de PHP, o ASP.NET MVC. La principal diferencia entre MVVM y MVC, sin entrar en demasiados tecnicismos, es que en el modelo de MVVM, existe la posibilidad de compartir datos transversalmente del modelo a la vista y viceversa de forma automática. Esto es lo que se conoce como "data-binding". Veremos un ejemplo más adelante.

Ejemplo de data-binding

Para crear una aplicación Knockout JS lo primero que hay que hacer es crear un archivo HTML y cargar la librería. Podemos descargar Knockout de la página oficial y guardar el archivo en local o bien usar una CDN como la de Microsoft. Por ejemplo, en un archivo HTML escribimos:

<html>
  <head>
    <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script>
  </head>
  <body>
    <div id="aplicacion">
    </div>
  </body>
</html>

Una vez cargada la librería, vamos a definir un ViewModel, que contendrá las propiedades y métodos así como la lógica de la aplicación. Para ello se crea un archivo Javascript: ViewModel.js, que añadiremos a continuación de haber cargado la librería en los encabezamientos HTML de la página:

<script src="ViewModel.js"></script>

Knockout JS utiliza lo que se conoce como observables para marcar una variable como tal, de modo que si su valor se modifica, se actualize automáticamente en la vista.

function ViewModel(){
  var nombre = ko.observable();
}

Una vez creado el View Model, hay que aplicarlo a la vista HTML donde tendrá efecto. Si te fijas, hemos creado un DIV con el id "aplicacion". Con la siguiente instrucción realizamos esta asignación:

ko.applyBindings(new ViewModel(), document.getElementById('aplicacion'));

Ahora vamos a lo divertido. Creamos una etiqueta HTML input text para que el usuario entre texto y automáticamente se escriba abajo:

<input data-bind="value: nombre" />
  <div data-bind="text: nombre">
</div>

Código completo

index.html

<html>
  <head>
    <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script>
    <script src="ViewModel.js"></script>
  </head>
  <body>
    <div id="aplicacion">
      <input data-bind="value: nombre" />
      <div data-bind="text: nombre">
      </div>
    </div>
  </body>
</html>

ViewModel.js

function ViewModel(){
  var nombre = ko.observable();
}
ko.applyBindings(new ViewModel(), document.getElementById('aplicacion'));