Primeros pasos con knockout.js

Primeros pasos: ¡Hola, mundo!

Creando un documento HTML y habilitando knockout.js

Cree un archivo HTML e incluya knockout.js a través de una etiqueta <script>.

<!DOCTYPE html>
<html>
<head>
    <title>Hello world! (knockout.js)</title>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
</body>
</html>

Agregue una segunda etiqueta <script> debajo del script de eliminación. En esta etiqueta de secuencia de comandos, inicializaremos un modelo de vista y aplicaremos enlaces de datos a nuestro documento.

<script>
  var ViewModel = function() {
    this.greeting = ko.observable("Hello");
    this.name = ko.observable("World");

    this.appHeading = ko.pureComputed(function() {
      return this.greeting() + ", " + this.name() + "!";
    }, this);
  };

  var appVM = new ViewModel();

  ko.applyBindings(appVM);
</script>

Ahora, continúe creando una vista agregando algo de HTML al cuerpo:

<section>
  <h1 data-bind="text: appHeading"></h1>
  <p>Greeting: <input data-bind="textInput: greeting" /></p>
  <p>Name: <input data-bind="textInput: name" /></p>
</section>

Cuando se abre el documento HTML y se ejecutan los scripts, verá una página que dice ¡Hola, mundo!. Cuando cambia las palabras en los elementos <input>, el texto <h1> se actualiza automáticamente.


Cómo funciona el archivo creado

  1. Se carga una versión de depuración de knockout desde una fuente externa (cdnjs)

Código:

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
  1. Se crea una instancia de modelo de vista que tiene propiedades observables. Esto significa que knockout puede detectar cambios y actualizar la interfaz de usuario en consecuencia.

Código:

var appVM = new ViewModel();
  1. Knockout verifica el DOM en busca de atributos de “enlace de datos” y actualiza la interfaz de usuario utilizando el modelo de vista proporcionado.

Código:

ko.applyBindings(appVM);
  1. Cuando encuentra un enlace de texto, knockout usa el valor de la propiedad tal como está definido en el modelo de vista enlazado para inyectar un nodo de texto:

Código:

<h1 data-bind="text: appHeading"></h1>

Instalación o Configuración

Knockout está disponible en la mayoría de las plataformas de JavaScript o como script independiente.

Incluir como script

Puede descargar el script desde su página de descarga, luego incluirlo en su página con una etiqueta de script estándar.

<script type='text/javascript' src='knockout-3.4.0.js'></script>

Usando un CDN

También puede incluir knockout desde Microsoft CDN o CDNJS

<script type='text/javascript' src='//ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>

O

<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js'></script>

Instalar desde npm

npm install knockout

opcionalmente, puede agregar el parámetro --save para mantenerlo en su archivo package.json

Instalar desde la glorieta

bower install knockout

opcionalmente, puede agregar el parámetro --save para mantenerlo en su archivo bower.json

Instalar desde NuGet

Install-Package knockoutjs

Observables calculados

Los observables computados son funciones que pueden “observar” o “reaccionar” a otros observables en el modelo de vista. El siguiente ejemplo muestra cómo mostraría el número total de usuarios y la edad promedio.

Nota: El siguiente ejemplo también puede hacer uso de pureComputed() (introducido en v3.2.0) ya que la función simplemente calcula algo basado en otras propiedades del modelo de vista y devuelve un valor.

<div>
  Total Users: <span data-bind="text: TotalUsers">2</span><br>
  Average Age: <span data-bind="text: UsersAverageAge">32</span>
</div>
var viewModel = function() {

    var self = this;

    this.Users = ko.observableArray([
        { Name: "John Doe", Age: 30 },        
        { Name: "Jane Doe", Age: 34 }
    ]);

    this.TotalUsers = ko.computed(function() {
        return self.Users().length;
    });

    this.UsersAverageAge = ko.computed(function() {
        var totalAge = 0;
        self.Users().forEach(function(user) {
            totalAge += user.Age;
        });
   
        return totalAge / self.TotalUsers();
    });
};

ko.applyBindings(viewModel);