Los manillares permiten construir plantillas semánticas. Los manillares son en gran medida compatibles con las plantillas de bigote. En la mayoría de los casos, es posible intercambiar Moustache con Manillares y continuar usando sus plantillas actuales.
Documentos oficiales de manillares: http://www.handlebarsjs.com
Demostración en vivo: http://tryhandlebarsjs.com/
- ¿Qué tan difícil es crear una página web de inicio de sesión y registro?
- Cómo solicitar cookies de un sitio web en Python
- ¿Cuál es la mejor manera de extraer información de varias tablas de base de datos?
- Cómo hacer una línea en Bootstrap CSS
- Si estuviera desarrollando un sitio web basado en una base de datos con contenido pesado enviado por el usuario (principalmente texto, algunas imágenes), ¿qué lenguaje (s) de programación y base de datos usaría? ¿Por qué?
Ahora comencemos!
Prerrequisitos
Antes de comenzar, asegúrese de tener RVM , Ruby y Rails instalados en su máquina. Si no lo hace, siga las instrucciones aquí: Cómo instalar Ruby on Rails en Ubuntu.
La siguiente versión de Ruby and Rails se utilizó en este tutorial
Rails 5.0.2
Ruby 2.2.3
Puede encontrar el código fuente completo de este tutorial de manillares .
Comience creando una nueva aplicación de rieles.
$ rails nuevos rieles de manillar
Agregue la gema bootstrap para aplicar un poco de estilo a sus páginas. ¡Por supuesto que esto es opcional!
Vamos a crear la API para el modelo de libros que usaremos en este tutorial.
$ rails g scaffold Precio del nombre del libro: autor entero – skip-template-engine
Agregar — skip-template-engine creará API sin vistas html.
Como config/routes.rb rutas de libros solo como una API, establecemos el formato predeterminado como JSON en el archivo config/routes.rb de nuestra aplicación. Hacerlo enviará toda la solicitud como JSON.
recursos: libros, valores predeterminados: {formato:: json}
Ahora agreguemos gemas de manillar a nuestro Gemfile .
gema ‘manillares_conjuntos’
y luego hacer $ bundle install para que se instale en la aplicación rails.
Como estamos trabajando con plantillas JS semánticas, deben organizarse en la carpeta assets/javascripts .
Cree templates nombre de directorio en la carpeta assets/javascripts como se sugiere en la documentación oficial de la gema del manillar. Entonces tendrá la siguiente estructura.
activos / javascripts / plantillas
Ahora agregue lo siguiente a su archivo de manifiesto application.js .
// = requiere manillar
// = require_tree ./templates
Nota: Asegúrese de mantenerlo antes de //= require_tree . de lo contrario, se encontrará con problemas importantes.
Ahora agreguemos nuestra primera plantilla de Manillares book_list.hbs a nuestra aplicación.
{{#libros}}
{{/libros}}
| Nombre del libro | Precio del libro | Autor | Acciones |
|---|---|---|---|
| {{name}} | {{price}} | {{author}} | |
Una cosa nueva que notará aquí es el bloque {{}} , todo lo escrito en este bloque se considera un código dinámico y será evaluado por el manillar en tiempo de ejecución. Es similar al código escrito como "#{a+b}" que se denomina interpolación de cadenas en ruby.
Aquí todo el código escrito entre {{#books}} … {{/books}} se coloca en el objeto de books . Los manillares proporcionan algunos ayudantes integrados, por lo que los usaremos de inmediato.
{{#libros}}
{{name}}{{price}}
{{author}}
{{/libros}}
Arriba tratará el name como book.name ya que está en bucle dentro del bucle de objetos de libros. Lo mismo se aplica al price y al author .
Cualquier plantilla de manillar se puede invocar usando
Plantillas de manillar [] (contexto)
Como por ejemplo,
HandlebarsTemplates [‘book_list’] ({books: data})
Aquí busca la assets/javascripts/templates/book_list.hbs y pasa el contenido de los data como books objeto a la plantilla.
También puede verificar la salida html de la misma en la consola de su navegador web. ¡Eso es muy bonito!
