[Tutorial] Comenzado con MVVM y Knockout.js - Parte 3: Agregar y remover elementos de Arreglos Observables.
Hola que tal? continuamos con este tutorial, esta vez con un pequeño ejemplo sobre las como agregar y remover objetos desde una colección observable, además veremos el como bindear atributos del DOM, como por ejemplo, el atributo Enable del botón para solo aceptar hasta 5 teléfonos.
Si no has visto los tutoriales anteriores, te aconsejo que los visites antes de seguir:
Parte 1
http://geeks.ms/blogs/gperez/archive/2012/08/13/tutorial-comenzado-con-mvvm-y-knockout-js.aspx
Parte 2
http://geeks.ms/blogs/gperez/archive/2012/08/22/tutorial-comenzado-con-mvvm-y-knockout-js-parte-2-propiedades-observables-e-iteraciones.aspx
En la siguiente animación podrás ver el comportamiento que vamos a logra. Lo nuevo en este ejemplo , como mencionábamos es:
- Agregar un input type=”number” para ingresar un nuevo teléfono a la colección
- Posibilidad de borrar estos teléfonos del ViewModel
- Mostrar la cantidad de teléfonos ingresados
- Inhabilitar el botón agregar cuando lleguemos a la cantidad de 5 teléfonos.
Veamos entonces el código que hace posible este funcionamiento. Primero que nada , en “clase” teléfono agregé un metodo que remueve de la colección de teléfonos del ViewModel a el objeto. Luego como puedes ver en el ViewModel hacemos un método addTelefono,que agregar un objeto teléfono obteniendo del valor desde el input tx_telefono, además y solo por un tema de demostración, envío una alerta con la cantidad de elementos de la colección
<script type="text/javascript">
function telefono(numero) {
return {
numero: ko.observable(numero),
borrar: function() {
PersonaViewModel.telefonos.remove(this);
}
};
}
var PersonaViewModel = {
nombre: ko.observable("Juan Pablo"),
apellidos: ko.observable("Pérez Nuñez"),
edad: ko.observable(1),
telefonos: ko.observableArray([new telefono(234234),
new telefono(565345)]),
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>
Veamos el código html que da soporte al comportamiento:
<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>
Podemos ver que el botón para agregar nuevos teléfonos tiene dos binding de comportamientos, 1 que liga el click con el método addTelefono, otro binding con el atributo enable, en el cual podemos utilizar directamente una condición sobre el ViewModel, en este caso, mientras sean menor a 5 (4 elementos) el largo de la colección el botón permanecerá activo, obviamente esto se logra ya que la condición va a retornar verdadero o falso y se asignará al atributo enable.
Para borrar, se hace algo muy parecido, se hace el binding con la función borrar simplemente, recordemos que estamos bajo el contexto de cada elemento de la colección de teléfonos mediante el foreach, por lo que al presionar borrar se entiende que estamos llamando a la función con el argumento que contiene propio objeto en cuestión, por eso es que podemos hacer remove(this).
Y por último, que ya se me olvidaba, creamos un span en donde al igual que el mensaje, muestro la cantidad de teléfonos que se han ingresado, haciendo binding de la propiedad text.
Como ves, bastante interesante este nuevo esquema, voy a seguir posteando tutoriales y luego unirlo con ASP.NET WEB API.
Por último te dejo el link de descarga:
https://dl.dropbox.com/u/1303802/MVVM1.zip
Saludos!
@chalalo