knockout.js Tutorial
Empezando con knockout.js
Buscar..
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 |
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
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
- 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>
- 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();
- Knockout verifica el DOM para
data-bindatributos dedata-binddedata-bindy actualiza la interfaz de usuario usando el modelo de vista proporcionado.
Código:
ko.applyBindings(appVM);
- 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>
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);