Este es una de las primeras funciones que cree experimentando y que me ayudo a entender como funcionaba el lenguaje de Blogger. También puedo decir que es la menos útil de todas las que he creado, pero me gusta tenerla a la mano por si la necesito.
Planteamiento
En Blogger tenemos una etiqueta para agregar atributos al padre, puedes agregar cualquier atributo pero solo uno a la vez, por ejemplo, para agregar id, class y data-foo, tendrías que hacerlo así:
<b:attr name='id' value='foo'/>
<b:attr name='class' value='foo'/>
<b:attr name='data-foo' value='bar'/>
También es posible usar esta misma función para eliminar atributos dejando el campo value vacío. El inconveniente es que, cuando construyes algo cuya lógica requiere agregar o remover múltiples atributos, el código puede volverse bastante repetitivo y extenso.
Implementación
Con esto en mente, podemos crear una función que nos permita agregar múltiples atributos en una sola línea, para ello nos ayudaremos de la etiqueta b:loop y aprovecharemos la naturaleza de b:attr
<b:includable id='@attr'>
<b:comment>
Add or remove multiple attributes
@author zkreations
@arg {Array[Array]} - Arrays of attributes to add or remove
</b:comment>
<b:loop values='data:' var='i'>
<b:attr expr:name='data:i[0] ?: "null"' expr:value='data:i[1]'/>
</b:loop>
</b:includable>
Cómo funciona
Lo que hemos hecho es crear una función llamada @attr que recibe un objeto de matrices. Aunque suene raro, en Blogger una matriz se pueden definir con cualquiera de las dos llaves [] {}, por ejemplo:
"data:" {
{"attr","value"},
["foo","bar"]
}
Conocer este hecho es importante ya que el atributo data de la etiqueta b:include solo acepta datos u objetos definidos con llaves. Luego la etiqueta b:loop interpretará este objeto como una matríz para obtener el nombre y valor de cada atributo con data:i[0] y data:i[1] respectivamente.
Parametros
La inclusión no tiene parámetros, ya que itera directamente sobre el objeto de datos. Este, a su vez, debe ser una matriz representada como un objeto que contiene otras matrices. Dependiendo de los elementos de estas matrices la inclusión agregará o removerá atributos.
Agregar atributos
Se comporta como setAttribute en JavaScript, donde el primer valor es el nombre del atributo y el segundo el valor. Para ello incluye la función de esta manera:
<footer class='another'>
<b:include data='{["id","foo"],["class","foo"]}' name='@attr'/>
</footer><footer id='foo' class='foo'></footer>Nota: Si el atributo especificado ya existe, el valor actual será reemplazado.
Remover atributos
Equivalente a removeAttribute en JavaScript, donde el primer valor es el nombre del atributo que se desea borrar. Para ello incluye la función de esta manera:
<footer id='example' class='another'>
<b:include data='{["id"],["class"]}' name='@attr'/>
</footer><footer></footer>Conclusión
Más allá de su utilidad práctica, esta función es un buen ejercicio para comprender mejor cómo funciona el motor de plantillas de Blogger y cómo sacarle provecho a sus limitaciones. Si quieres ver este codigo en acción o partir de una base para tus propias pruebas, revisa los archivos adjuntos al final del artículo.
Gracias por haber llegado hasta aquí, si encuentras esto útil, puedes compartir este articulo en tus redes sociales. Si necesita ayuda adicional, déjala en los comentarios, respondo a todos.
