DEJA TUS APLICACIONES EN LA LONA. PARTE 2. BINDINGS DE APARIENCIA

< script src=”my own” title=”parte 2. bindings de apariencia” >

En un post anterior, había descrito muy por encima lo que Knockout.js puede hacer a través de su arquitectura MVVM. En este post voy a definir y utilizar los bindings de apariencia que provee Knockout por medio de un ejemplo práctico… ¡A pelear se ha dicho!

Bindings de apariencia

Knockout permite colocar elementos en el DOM y enlazarlos con determinados tipos de comportamiento que corresponden a las secciones de nuestra maqueta HTML o de los CSS que hayamos definido. En el ejemplo del post anterior vimos algunos de estos bindings:

  • El binding text permite que un valor aparezca como texto plano dentro del DOM.
  • El binding visible permite que un elemento del DOM sea mostrado según una condición.

Ahora veremos algunos nuevos bindings.

  • El binding html permite insertar contenido HTML dentro de un elemento del DOM.
  • El binding style permite insertar clases CSS dentro de un elemento del DOM.
  • El binding css permite asociar clases y estilos CSS de forma condicional a un elemento del DOM.
  • El binding attr permite insertar atributos HTML que correspondan a un elemento específico del DOM.

A continuación ilustro el uso de estos bindings con un ejemplo sencillo.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo Knockout</title>
    <style>
        .myClass {font-size: 32px;}
    </style>
</head>
<body>
    <h1 data-bind="html: getNombre()"></h1>

    <!-- los bindings se separan con "," como si fueran atributos de un objeto -->
    <!-- En el caso particular del binding "style", los atributos se especifican en formato camelCase -->
    <p data-bind="style: { marginBottom: 0, paddingBottom: '1em' }, css: 'myClass'">Este texto fue personalizado con clases CSS y estilos</p>

    <p data-bind="attr: { id: 'myCustomId' }">Este párrafo está referenciado por un id personalizado.</p>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
    <script>
        function ViewModel() {
            var self = this;

            self.nombre = 'Chinux Paribus';

            self.getNombre = function() {
                return 'Hola <em>' + self.nombre + '</em>!';
            };
        };

        ko.applyBindings(new ViewModel());
    </script>
</body>
</html>

Los bindings de apariencia se vuelven útiles cuando existen estados complejos en nuestra aplicación o interfaz que no dependen necesariamente de elementos del DOM sino más bien de datos recibidos vía AJAX, base de datos u otros requests HTTP :mrgreen: .

En el caso del binding attr, por ejemplo, es útil colocar id’s únicos generados aleatoriamente o que dependan de otros datos para diferenciarlos (para asignar un diferente handler de eventos por elementos, por ejemplo). En el caso del binding html, puedes insertar un HTML que haya sido generado dinámicamente por otra aplicación o sección de ésta.

Tanto el binding css como el binding style son muy útiles cuando se están utilizando efectos de transición, ya que están cambiando constantemente los atributos CSS como width o position, permitiendo crear animaciones de forma sencilla y sin usar mucho código Javascript.

Seguiré con las ilustraciones de los bindings de Knockout hasta trabajar en un proyecto un tanto más complejo.

¡A noquear aplicaciones! 😉

</script>

Anuncios

3 comentarios en “DEJA TUS APLICACIONES EN LA LONA. PARTE 2. BINDINGS DE APARIENCIA

Los comentarios están cerrados.