[Tutorial] Comenzado con MVVM y Knockout.js – Parte 2: Propiedades Observables e Iteraciones.

Hola, vamos a continuar con el aprendizaje sobre MVVVM, si es primera vez que estas viendo este blog, te recomiendo ver primero el articulo introductorio de esta serie.

Hoy vamos a seguir revisando esta nueva forma de construir aplicaciones Web, revisaremos más posibilidades.

Si recordamos, ya teníamos creado nuevo viewmodel, ahora vamos revisar como crear propiedades observables, además de como crear colecciones y bindearlas a nuestro DOM.

Como seguimos del ejemplo anterior, quiero mostrar una captura de como va a quedar finalmente esta parte del ejemplo, luego seguiremos con más características.

image

Primero que nada, vamos a unir tal cual el ejemplo anterior , los campos input a los atributos del ViewModel. Para esto , hacemos “observable” todas los atributos del ViewModel.
Luego vamos a crear una propiedad que concatene el atributo nombre y el atributo apellido en una sola “nombreCompleto”, la cual también será de tipo “dependentObservable”, y que como puedes ver , pasa a ser una propiedad del PersonaViewModel.

Por ultimo tendremos una teléfonos, que va a ser un array también observable, más adelante veremos como agregar y eliminar objetos de la colección. Esta colección de teléfonos, es una función que hace de clase y tiene su propiedad numero también observable.

 <script type="text/javascript">

      function telefono(numero) {
             return {
                numero: ko.observable(numero)
             };
      }
 
     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)])
     };
 
     PersonaViewModel.nombreCompleto = ko.dependentObservable(function() {
           return this.nombre() + " " + this.apellidos();
     }, PersonaViewModel)
     ko.applyBindings(PersonaViewModel);
</script>      

Veamos ahora el HTML necesario para dar soporte a este ModelView.

  <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>
     </p>
     <h4>Telefonos</h4>
     <ul data-bind="foreach: telefonos">
           <li><span data-bind="text: numero"></span></li>
     </ul>

Podemos ver que el binding se ha hecho en los input del formulario (le agregué un css con display:block para que en el despliegue se viera el input bajo el label). Como ya sabemos si cambiamos el campo en los textos vamos a ver de forma inmediata el cambio en el MV y también en el span del nombreCompleto. El Foreach de Knockout.js cambia desde las versión 2.0 y simplifica bastante las cosas, com ves, solo se indica el data-binding, la acción “foreach” y la colección, luego dentro, se hace el binding sobre el elemento a iterar y listo!

El Siguiente Gif Animado indica el funcionamiento:

mvvm2

Obviamente utilicé WebMatrix 2 (RC) para este ejemplo, excelente herramienta, si hasta tiene autocompletación de código para Knockout.js

image

Espero que te sirva el ejemplo y continuamos con más prontamente Sonrisa

Saludos!

@chalalo

6 comentarios en “[Tutorial] Comenzado con MVVM y Knockout.js – Parte 2: Propiedades Observables e Iteraciones.”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *