Blog de Diego Arturo Hernández Fuentes
Programando con Knockout
Ahora esta vez, les traigo como programar con Knockout, como se vio con Kendo Ui, srive para el desarrollo de aplicaciones solamente Web con HTML y JavaScript.
Su pagina de incio donde se encuentra toda la información acerca de esta herramienta.
Para descargar esta herramienta se tiene que ir a este sitio. En donde dice the downloads pages se encuentran todas las versiones y documentos de Knockouts.
Al darle clic aparece una página con las librerias y archivos de Knockouts.
En donde tienen que descargar los siguientes archivos:
Al descargar ambos archivos tienes que pegarlos a la carpeta donde vas a guardar tu archivo HTML. Crea una carpeta con el nombre "js" ahí colocarás el archivo knockout-2.1.0.js. Luego creas un archivo HTML con la siguiente sintaxis.
En cabecera de tu codigo coloca esta sintaxis para hacer referencia al script
Cuando ejecutes tu código aparecerá un formulario,donde al teclear tus datos actualiza la ventana.
Es este vinculo esta el Tutorial para desarrollar en Knockout.
Lo malo de esta herramienta es que no maneja CSS solamente HTML y Java Script.
Su pagina de incio donde se encuentra toda la información acerca de esta herramienta.Para descargar esta herramienta se tiene que ir a este sitio. En donde dice the downloads pages se encuentran todas las versiones y documentos de Knockouts.
Al darle clic aparece una página con las librerias y archivos de Knockouts.
En donde tienen que descargar los siguientes archivos:
Al descargar ambos archivos tienes que pegarlos a la carpeta donde vas a guardar tu archivo HTML. Crea una carpeta con el nombre "js" ahí colocarás el archivo knockout-2.1.0.js. Luego creas un archivo HTML con la siguiente sintaxis.
En cabecera de tu codigo coloca esta sintaxis para hacer referencia al script
<script type='text/javascript' src='knockout-2.1.0.js'></script>
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8">
<title>Kn</title>
<style type="text/css">
label{
display:block;
}
</style>
<script type="text/javascript" src="js/Knockout-2.1.0.js">
</script>
</head>
<body>
<h1>Ejemplo MVVM</h1>
<ul>
<li>El nombre es <span data-bind="text:nombre">
</span></li>
<li>El apellido es <span data-bind="text:apellidos">
</span></li>
<li>El edad es <span data-bind="text:edad"></span></li>
</ul>
<label for="tx_nombre">Nombre:</label>
<input type="text" id="tx_nombre" data-bind="value:nombre" >
<label for="tx_apellidos">Apellidos:</label>
<input type="text" id="tx_apellidos" data-bind="value:apellidos" >
<label for="tx_edad">Edad:</label>
<input id="tx_edad" type="number" data-bind="value:edad">
<p>
Nombre Completo: <span data-bind="text:nombreCompleto"></span>
<br>
Direccion completa: <span data-bind="text:calleCompleto"></span>
</p>
<label for="tx_telefono">Telefono</label>
<input type="number" id="tx_telefono" />
<button data-bind="click: addTelefono, enable: telefonos().length<5">Agregar</button>
Maximo 5 telefonos!
<h4>Telefonos (<span data-bind="text: telefonos().length" >
</span>)</h4>
<ul data-bind="foreach: telefonos">
<li>
<span data-bind="text: numero"></span>
<button data-bind="click: borrar" >Borrar</button>
</li>
</ul>
<script type="text/javascript">
function telefono(numero) {
return {
numero: ko.observable(numero),
borrar: function() {
PersonaViewModel.telefonos.remove(this);
}
};
}
var PersonaViewModel = {
nombre: ko.observable(""),
apellidos: ko.observable(""),
edad: ko.observable(),
calle: ko.observable(""),
numero: ko.observable(),
telefonos: ko.observableArray([]),
addTelefono: function() {
this.telefonos.push(new telefono(document.getElementById
("tx_telefono").value));
alert("Cantidad de Telefonos:" + this.telefonos().length);
}
};
PersonaViewModel.nombreCompleto = ko.dependentObservable(function()
{
return this.nombre() + " " + this.apellidos();
}, PersonaViewModel)
ko.applyBindings(PersonaViewModel);
</script>
</body>
</html>
Cuando ejecutes tu código aparecerá un formulario,donde al teclear tus datos actualiza la ventana.
Es este vinculo esta el Tutorial para desarrollar en Knockout.
Lo malo de esta herramienta es que no maneja CSS solamente HTML y Java Script.
0 comentarios:
Publicar un comentario