Uso de handlebars

Publicado porMarcos 156 comentarios en Uso de handlebars

En esta pequeño tutorial veremos un ejemplo básico del uso de handlebars, que nos permita descubrir y entender las principales partes implicadas en el trabajo con este motor de plantillas del lado cliente, que se caracteriza por no añadir prácticamente lógica funcional a las plantillas, centrándose en al semántica.

Los principales elementos en el trabajo con Handlebars son:

  • Un contexto: conjunto de datos que serán aplicados sobre la plantilla para obtener esa salida final.
  • Una plantilla: fragmento de HTML con elementos especiales (denominados expresiones) que serán reemplazados con los datos finales a la hora de convertir la plantilla en la salida final para el navegador.
  • La librería: que nos permite compilar la plantilla para posteriormente aplicarle el contexto que producirá la salida final para le navegador.

Veamos uno a uno el uso de éstos elementos para lograr el objetivo que no es otro que simplificar al máximo la generación de contenido HTML a partir de un conjunto de datos con carácter dinámico.

El contexto

Como decíamos el contexto es el conjunto de datos que permitirá crear a partir de la plantilla un resultado de salida específico, este contexto puede ser un elemento simple o complejo, ya que handlebars permite acceder a propiedades en objetos anidados a través de sus denominados «nested paths«.

var data = {
    usuarios: [
        {
            nombre: 'Marcos',
            puntos: 1254
        },
        {
            nombre: 'Carlos',
            puntos: 1157
        },
        {
            nombre: 'Mariano',
            puntos: 0
        },
        {
            nombre: 'Jose Luis',
            puntos: 0
        }
    ]
};

La plantilla

La plantilla normalmente es un fragmento de HTML que incluye elementos adicionales conocidos como expresiones. Estas expresiones se evaluarán al aplicar el contexto para generar el resultado final. Para incluir una plantilla handlebars en nuestro proyecto empleamos la etiqueta <script>  con un valor específico para el atributo type  y en su interior definimos el HTML que queremos emplear como plantilla.

<script id="user-template" type="text/x-handlebars-template">
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Usuario</th>
                    <th>Puntuación</th>
                </tr>
            </thead>
            <tbody>
                {{#each usuarios}}
                <tr>
                    <td>{{obtenerRanking}}</td>
                    <td>{{nombre}}</td>
                    <td>{{puntos}} puntos.</td>
                </tr>
                {{/each}}
            </tbody>
        </table>
    </script>

En la plantilla podemos observar los mecanismos de interacción con el contexto, a través de las expresiones encerradas entre llaves. Si nos fijamos además disponemos de alguna funcionalidad adicional como #each  para recorrer un array (se denominan built-in helpers), aunque en el caso de este motor de plantillas son muy pocas ya que precisamente se centra solo en la semántica, y no quiere «engordar» con funcionalidad prefabricada y lógica de aplicación.

La plantilla anterior, básicamente lo que haría es recorrer la lista de usuarios que alberga el array usuarios  y por cada elemento de dicho array, mostraría la posición, el nombre y los puntos. Se aprecia como nombre  y puntos  son propiedades de cada objeto del array, sin embargo se ha hecho uso de un helper personalizado denominado obtenerRanking  que lleva el control de posición en cada iteración del bloque #each .

En realidad Handlebars cuenta con la variable {{@index}}  dentro de un bloque #each , pero esta comienza en 0 por lo que se ha hecho uso de un helper personalizado para lograr comenzar en 1, y de paso añadir este elemento tan necesario en el uso de Handlebars en el mismo.

La librería

La inclusión de la librería se puede hacer desde una CDN de entre las existentes (por ejemplo cdnjs.cloudflare.comcdnjs.cloudflare.com) o descargándola desde el sitio oficial (handlebarsjs.com) para usarla localmente. Como en otras ocasiones, puede ser recomendable la combinación de ambos métodos para lograr optimizar la carga de la misma, con un código como el siguiente:

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
    <script>window.Handlebars || document.write('<script src="js/vendor/handlebars-v4.0.5.js">\x3C/script>');</script>

El ejemplo en funcionamiento

Para ver este ejemplo funcionando, podéis hacer uso del proyecto en GitLab en el que se ha basado este tutorial, que está accesible simplemente accediendo a: https://gitlab.com/qmarcos/handlebars-basics

Aprendiendo a usarlo online

Para ver en acción y poder probar este motor sin ni siquiera requerir una instalación local, existe un recurso muy interesante que nos permite jugar con la mecánica del mismo empleando todos los elementos que pueden necesitarse: plantilla, contexto, helpers… Este recurso se encuentra en http://tryhandlebarsjs.com

Referencias

A continuación se recogen una serie de referencias relevantes para el aprendizaje básico de Handlebars, así como la documentación oficial.

 

Únete a la conversación

156 comentarios

  1. Responder
  2. Responder
  3. Responder
  4. Responder
  5. Responder
  6. Responder
  7. Responder
  8. Responder
  9. Responder
  10. Responder
  11. Responder
  12. Responder
  13. Responder
  14. Responder

  15. Хочеш зазнати успіху? найкращі онлайн казино: свіжі огляди, рейтинг майданчиків, вітальні бонуси та фрізпіни, особливості слотів та лайв-ігор. Докладно розбираємо правила та нагадуємо, що грати варто лише на вільні кошти.

    Responder
  16. Responder
  17. Responder
  18. Responder
  19. Responder
  20. Responder
  21. Responder

  22. Хочешь развлечься? купить мефедрон федерация – это проводник в мир покупки запрещенных товаров, можно купить гашиш, купить мефедрон, купить кокаин, купить меф, купить экстази, купить альфа пвп, купить гаш в различных городах. Москва, Санкт-Петербург, Краснодар, Владивосток, Красноярск, Норильск, Екатеринбург, Мск, СПБ, Хабаровск, Новосибирск, Казань и еще 100+ городов.

    Responder
  23. Responder
  24. Responder

  25. Хочешь развлечься? купить гашиш федерация – это проводник в мир покупки запрещенных товаров, можно купить гашиш, купить мефедрон, купить кокаин, купить меф, купить экстази, купить альфа пвп, купить гаш в различных городах. Москва, Санкт-Петербург, Краснодар, Владивосток, Красноярск, Норильск, Екатеринбург, Мск, СПБ, Хабаровск, Новосибирск, Казань и еще 100+ городов.

    Responder
  26. Responder

  27. Хочешь развлечься? купить альфа пвп федерация – это проводник в мир покупки запрещенных товаров, можно купить гашиш, купить мефедрон, купить кокаин, купить меф, купить экстази, купить альфа пвп, купить гаш в различных городах. Москва, Санкт-Петербург, Краснодар, Владивосток, Красноярск, Норильск, Екатеринбург, Мск, СПБ, Хабаровск, Новосибирск, Казань и еще 100+ городов.

    Responder
  28. Responder
  29. Responder
  30. Responder
  31. Responder
  32. Responder
  33. Responder
  34. Responder
  35. Responder
  36. Responder
  37. Responder
  38. Responder
  39. Responder
  40. Responder
  41. Responder
  42. Responder
  43. Responder
  44. Responder
  45. Responder
  46. Responder
  47. Responder
  48. Responder
  49. Responder
  50. Responder
  51. Responder
  52. Responder
  53. Responder
  54. Responder
  55. Responder
  56. Responder
  57. Responder

  58. Нужна работа в США? курс диспетчера грузоперевозок вечерний формат : работа с заявками и рейсами, переговоры на английском, тайм-менеджмент и сервис. Подходит новичкам и тем, кто хочет выйти на рынок труда США и зарабатывать в долларах.

    Responder

  59. Нужна работа в США? обучение диспетчера в америке в сша онлайн : работа с заявками и рейсами, переговоры на английском, тайм-менеджмент и сервис. Подходит новичкам и тем, кто хочет выйти на рынок труда США и зарабатывать в долларах.

    Responder
  60. Responder

  61. Нужна работа в США? курс диспетчера грузоперевозок в америке онлайн с реальными кейсами : работа с заявками и рейсами, переговоры на английском, тайм-менеджмент и сервис. Подходит новичкам и тем, кто хочет выйти на рынок труда США и зарабатывать в долларах.

    Responder
  62. Responder
  63. Responder
  64. Responder
  65. Responder
  66. Responder
  67. Responder
  68. Responder
  69. Responder
  70. Responder
  71. Responder
  72. Responder
  73. Responder
  74. Responder
  75. Responder
  76. Responder
  77. Responder
  78. Responder
  79. Responder
  80. Responder
  81. Responder
  82. Responder
  83. Responder
  84. Responder
  85. Responder
  86. Responder
  87. Responder
  88. Responder
  89. Responder
  90. Responder
  91. Responder
  92. Responder
  93. Responder
  94. Responder
  95. Responder
  96. Responder

  97. Уникальный портал http://www.relevantdirectories.com/Internet/Misc/Auctions/Regional/Nauru/ предоставляет возможность приобрести прогретые расходники для бизнеса. Ключевое преимущество этого шопа — заключается в наличии приватной базы знаний, в которой выложены свежие статьи по арбитражу. Тут можно найти акки Google, Twitter, Telegram для любых задач: начиная с авторегов и заканчивая фармленными кабинетами с друзьями. Покупая у нас, клиент получает не только куки, а также полную помощь саппорта, гарантию на вход плюс самые адекватные расценки на рынке.

    Responder
  98. Responder
  99. Responder
  100. Responder
  101. Responder
  102. Responder
  103. Responder
  104. Responder
  105. Responder
  106. Responder
  107. Responder
  108. Responder
  109. Responder
  110. Responder
  111. Responder
  112. Responder
  113. Responder
  114. Responder
  115. Responder
  116. Responder

  117. Advanced marketplace https://inzicontrols.net/battery/bbs/board.php?bo_table=qa&wr_id=494981 is proud to introduce direct access to order valid profiles for promotion. The pride of our service is the availability of an extensive learning center, containing working instructions about ad campaigns. Inside the guides, we share insights regarding anti-detect browsers to increase ROI for your marketing efforts. Our inventory features pages for Twitter, Discord, LinkedIn for all needs: ranging from softregs up to farmed business managers with history.

    Responder
  118. Responder
  119. Responder
  120. Responder
  121. Responder
  122. Responder
  123. Responder
  124. Responder
  125. Responder
  126. Responder
  127. Responder
  128. Responder
  129. Responder
  130. Responder
  131. Responder
  132. Responder
  133. Responder
  134. Responder

  135. Fort de l’essor croissant des sites de casino en France, vous recherchez certainement le meilleur casino en ligne sécurisé et offrant des retraits rapides. Consciente de cela, notre équipe a pris le soin d’évaluer plusieurs casinos pour ne retenir que les meilleurs pour 2025, comme Unibet, Betclic ou Winamax. Nous avons analysé chaque casino en ligne en France selon les critères suivants : licence, sécurité, paiement, offres de bonus et jeux. Découvrez nos meilleures recommandations dans ce guide.

    Responder

  136. Top 9 Meilleur casino en ligne pour les joueurs français: Winamax – idéal pour le poker et les tournois en ligne, Pokerstars – top pour affronter les joueurs de poker du monde entier, Wazamba – parfait pour les tournois réguliers attractifs, PMU – spécialisé sur le turf, mais propose aussi les paris sportifs, Unibet – idéal pour varier les jeux en ligne, FDJ – meilleure option pour les jeux de loterie et les jeux traditionnels français, Betclic – offre une interface intuitive et des paris combinés, Parionsweb – pensé pour les parieurs français traditionnels, Bwin – intéressant pour les paris sportifs et options hybrides. Le marché du casino en ligne en France connaît une croissance exceptionnelle en 2025. Avec plus de 3 millions de joueurs actifs, les casinos en ligne français offrent une expérience de jeu de plus en plus sophistiquée et sécurisée. Ce guide complet vous présente les meilleurs casinos en ligne disponibles en France, leurs bonus exclusifs, et toutes les informations essentielles pour jouer en toute sécurité.

    Responder

  137. Top 9 Meilleur casino en ligne pour les joueurs français: Winamax – idéal pour le poker et les tournois en ligne, Pokerstars – top pour affronter les joueurs de poker du monde entier, Wazamba – parfait pour les tournois réguliers attractifs, PMU – spécialisé sur le turf, mais propose aussi les paris sportifs, Unibet – idéal pour varier les jeux en ligne, FDJ – meilleure option pour les jeux de loterie et les jeux traditionnels français, Betclic – offre une interface intuitive et des paris combinés, Parionsweb – pensé pour les parieurs français traditionnels, Bwin – intéressant pour les paris sportifs et options hybrides. Le marché du casino en ligne en France connaît une croissance exceptionnelle en 2025. Avec plus de 3 millions de joueurs actifs, les casinos en ligne français offrent une expérience de jeu de plus en plus sophistiquée et sécurisée. Ce guide complet vous présente les meilleurs casinos en ligne disponibles en France, leurs bonus exclusifs, et toutes les informations essentielles pour jouer en toute sécurité.

    Responder

  138. Déterminer quel casino en ligne est réellement adapté pour miser de l’argent véritable s’avère bien plus délicat qu’on pourrait le penser. En 2025, le secteur français des jeux virtuels connaît une croissance rapide, mettant à disposition plus de 200 plateformes certifiées accessibles aux joueurs nationaux. Cette multitude d’options rend la sélection d’un site fiable et agréable encore plus exigeante.C’est pour cette raison que notre classement s’appuie sur une analyse rigoureuse. L’ensemble des casinos en argent réel mentionnés ici ont été examinés en détail avant d’être ajoutés. La sécurité des utilisateurs demeure au cœur de nos priorités, et notre objectif est de vous éviter les dangers associés aux sites non fiables, de plus en plus nombreux sur le web.

    Responder

  139. Déterminer quel casino en ligne est réellement adapté pour miser de l’argent véritable s’avère bien plus délicat qu’on pourrait le penser. En 2025, le secteur français des jeux virtuels connaît une croissance rapide, mettant à disposition plus de 200 plateformes certifiées accessibles aux joueurs nationaux. Cette multitude d’options rend la sélection d’un site fiable et agréable encore plus exigeante.C’est pour cette raison que notre classement s’appuie sur une analyse rigoureuse. L’ensemble des casinos en argent réel mentionnés ici ont été examinés en détail avant d’être ajoutés. La sécurité des utilisateurs demeure au cœur de nos priorités, et notre objectif est de vous éviter les dangers associés aux sites non fiables, de plus en plus nombreux sur le web.

    Responder

  140. Quel est le meilleur casino en ligne France pour jouer en toute sécurité en 2025 ? Il faut dire qu’aujourd’hui, trouver un site de casino en ligne fiable n’est pas une mince affaire. Il est très facile de se perdre parmi l’offre grandissante des casinos français en ligne. Mais pas de panique, nous sommes là ! Dans ce guide, nos experts vous présentent un classement complet pour vous aider à choisir le casino en ligne gratuit ou en argent réel qui correspond à vos attentes à 100 %. Chez nous, pas d’embrouille ni de coup fourré. Notre credo ? Vous faire découvrir les meilleurs casinos en ligne France du moment pour vous faire profiter pleinement de vos jeux de casino favoris. Suivez le guide !

    Responder
  141. Responder
  142. Responder
  143. Responder
  144. Responder
  145. Responder
  146. Responder
  147. Responder
  148. Responder
  149. Responder
  150. Responder
  151. Responder
  152. Responder
  153. Responder
  154. Responder
  155. Responder
  156. Responder

Dejar un comentario

Responder a belarus-news-334 Cancelar la respuesta

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