Knockout (JavaScript)
- Para el término boxístico, consulte nocaut.
| ||||||||||||
Knockout: es una biblioteca de JavaScript que permite crear, de manera rápida y fácil, Interfaces de Usuario (UI) con su propio sistema de actualización de datos subyacentes. Knockout no compite con jQuery o similares APIs de bajo nivel. Más bien proporciona un complemento, de alto nivel, de las formas de enlazar un modelo de datos con una interfaz de usuario.
Knockout en si mismo no depende de jQuery, pero permite usar jQuery al mismo tiempo, y de hecho, a menudo es útil si se quiere implementar cosas como transiciones animadas.
Sumario
Características Principales
- Refinado seguimiento de dependencia: actualiza automáticamente las partes adecuadas de la interfaz de usuario cada vez que hay cambios en el modelo de datos.
- Enlaces declarativos: una manera simple y obvia para conectar partes de la interfaz de usuario al modelo de datos. Esto permite construir interfaces de usuario dinámicas complejas de una manera sencilla utilizando arbitrariamente contextos anidados.
- Fácil personalización: pone en práctica comportamientos personalizados como los nuevos enlaces declarativos para la fácil reutilización en tan sólo unas pocas líneas de código.
Otras caractrísticas
- Funciona con cualquier tecnología de servidor o de cliente.
- Se puede añadir nuevas partes a la aplicación web existente sin necesidad de grandes cambios en la arquitectura
- Extremadamente compacto.
- Funciona en cualquier navegador convencional (IE 6 +, Firefox 2 +, Chrome, Safari, otros)
- Su funcionamiento puede ser fácilmente verificado en los nuevos navegadores y plataformas.
- Amplia Documentación.
- Libre y de Código abierto (MIT license)
Código de ejemplo
Ejemplo de página sin Knockout
<div id="AvailabilityPanel">
</div>
<div id="SignupPanel" style="display:none;">
</div>
<div id="RejectionPanel" style="display:none;color:red;">
The product is not available or you have too many products in your cart.
</div>
This item has been added to the cart with a quantity of <span id="quantityconf"></span>
</div>
<script type="text/javascript">
var zipsForAvailability = [ "33426", "00501", "90210", "15239", "19231", "42703" ];
function cart() {
var qnt = $("#quantity").val();
if ($.isNumeric(qnt) && qnt <= 5) { //show/hide confirmation/rejection if valid/invalid
$("#ConfirmationPanel").show();
$("#quantityconf").html(qnt);
$("#RejectionPanel").hide();
}
else {
$("#RejectionPanel").show();
$("#ConfirmationPanel").hide();
}
}
function checkAvailability() { //show/hide quantity based on zip
var zip = $("#zipcode").val();
if ($.isNumeric(zip) && zipsForAvailability.indexOf(zip) > -1) {
$("#SignupPanel").show();
$("#RejectionPanel").hide();
}
else {
$("#SignupPanel").hide();
$("#RejectionPanel").show();
}
}
</script>
Ejemplo de página con Knockout
//Knockout ViewModel
ViewModel function () {
var self = this;
this.quantity = ko.observable (0);
this.zipCode ko.observable = ("");
this.shouldShowRejection ko.computed = (function () {
return (self.quantity () <0 | | self.quantity ()> = 5) | |
. self.zipCode () longitud> 0 && zipsForAvailability.indexOf (self.zipCode ()) == -1;
});
this.shouldShowConfirmation ko.computed = (function () {
volver self.quantity ()> = 1 && self.quantity () <= 5 &&
zipsForAvailability.indexOf (self.zipCode ())> -1;
});
this.shouldShowSignup ko.computed = (function () {
volver zipsForAvailability.indexOf (self.zipCode ())> -1;
});
};
Vinculación de la vista al ViewModel
<input id="zipcode" data-bind="value:zipCode" /> <span id="quantityconf" data-bind="text:quantity" /> <div id="SignupPanel" data-bind="visible:shouldShowSignup"> <div id="RejectionPanel" style="color:red;" data-bind="visible:shouldShowRejection"> </div>
