Looking for knockout.js Answers? Try Ask4KnowledgeBase
Looking for knockout.js Keywords? Try Ask4Keywords

knockout.jsEmpezando con knockout.js


Observaciones

Esta sección proporciona una descripción general de qué es knockout.js y por qué un desarrollador puede querer usarlo.

También debe mencionar cualquier tema grande en knockout.js y vincular a los temas relacionados. Dado que la Documentación para knockout.js es nueva, es posible que deba crear versiones iniciales de esos temas relacionados.

Versiones

Versión Notas Fecha de lanzamiento
3.4.2 Corrección de errores 2017-03-06
3.4.1 Corrección de errores 2016-11-08
3.4.0 2015-11-17
3.3.0 2015-02-18
3.2.0 Enlace de component introducidos 2014-08-12
3.1.0 2014-05-14
3.0.0 Ver también: actualizar (desde 2.x) notas 2013-10-25
2.3.0 Último lanzamiento 2.x 2013-07-08
2.0.0 2011-12-21
1.2.1 Último lanzamiento 1.x 2011-05-22
1.0.0 2010-07-05

Observables calculados

Los observables calculados son funciones que pueden "ver" 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 ejemplo a continuación también puede usar pureComputed () (introducido en v3.2.0) ya que la función simplemente calcula algo en función de 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);
 

Comenzando: ¡Hola mundo!

Creando un documento HTML y habilitando knockout.js

Cree un archivo HTML e incluya knockout.js 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 knockout. En esta etiqueta de script, 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 abra el documento HTML y se ejecuten 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. Una versión de depuración de knockout se carga 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 viewmodel que tiene propiedades observables . Esto significa que el knockout puede detectar cambios y actualizar la interfaz de usuario en consecuencia.

Código:

var appVM = new ViewModel();
 
  1. Knockout verifica el DOM para data-bind atributos de data-bind de data-bind y actualiza la interfaz de usuario usando el modelo de vista proporcionado.

Código:

ko.applyBindings(appVM);
 
  1. Cuando encuentra un enlace de text , el 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 un script independiente.

Incluir como guion

Puede descargar el script desde su página de descarga , luego incluirlo en su página con una script tag 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