Hola qué tal?
Les hago una consulta, resulta que tengo una página con un mapa en el cual se visualizan unos marcadores. Actualmente los estoy cargando de manera estática, pero necesito hacerlo de manera dinámica, y todo el código relacionado, lo tengo en un archivo llamado mapa.js Es decir tengo mi página: direcciones.html.twig. que contiene:
<script src="{{ asset('bundles/main/js/mapa.js')}}"></script>
El problema que tengo es que al intentar poner código twig en mi archivo .js, obviamente consigo un error.
Mi pregunta: ¿cómo puedo hacer para solucionar éste problema? Ya que no quisiera tener que poner el código de carga de marcadores dentro de unas etiquetas: <script></script> dentro de mi página direcciones.html.twig
Respuestas
La primera solución, que a algunos les parecerá horrible, pero es "razonable" sería poner el enlace a mano sin usar la función asset(). Obviamente esto solo es posible si la aplicación ya es madura y no va a cambiar mucho esa parte. Si no, el enlace se podría romper con frecuencia.
La otra solución sería procesar el archivo JavaScript con Twig. Para ello, cambia su extensión a .js.twig y después inclúyelo en la plantilla como si fuera una plantilla normal:
<head>
{{ include('@Mibundle/js/mapa.js.twig') }}
</head>
En este caso, la plantilla mapa.js.twig debería estar en src/MibundleBundle/Resources/views/js/
@javiereguiluz
He convertido mi archivo: mapa.js en mapa.js.twig y ahora si me deja agregar código Twig dentro del mismo.
Pero cuando se carga la página y tiene que cargar la imagen:
var image = new google.maps.MarkerImage({{asset('bundles/main/img/pin-em.png') }});
en la consolaJs me sale el siguiente error en esa línea de código:
Unexpected Token {
Mi archivo: mapa.js.twig, lo estoy vinculando a mi página de direcciones.html.twig de la siguiente manera:
<script src="{{ asset('bundles/main/js/mapa.js.twig')}}"></script>
Porque si a mi archivo mapa.js.twig, lo muevo a la carpeta public/js/ del bundle en el que tiene que estar, me sale un error twig que dice: no se pudo encontrar el archivo. El include en este caso lo estoy haciendo de la siguiente manera:
{{ include( 'Main/js/mapa.js.twig') }}
Siendo Main, el nombre de mi bundle: MainBundle.
¿Estoy usando mal el include()?
@MrXXX0323
Respecto al error "Unexpected Token", prueba a encerrar entre comillas la cadena de texto que genera la función asset():
var image = new google.maps.MarkerImage("{{ asset('bundles/main/img/pin-em.png') }}");
Y respecto al include(), cuando te refieres a bundles, hay que incluir el carácter @ por delante:
{{ include( '@Main/js/mapa.js.twig') }}
@javiereguiluz
Si si si si!! Feliz de la vida! xD
No sé porque no lo estaba entendiendo!!!
La solución fue:
Dentro de mi bundle (MainBundle/Resources/View/) creé una carpeta llamada FrontEnd/ y una subcarpeta llamada mapa/. Dentro de ésta carpeta mapa creé una plantilla llamada mapa.html.twig solo con el siguiente código:
<script>
function cargarMarcadores(){
var image = new google.maps.MarkerImage("{{asset('bundles/main/img/pin-em.png') }}");
}
</script>
En síntesis lo que hice fue crear una plantilla Twig que solo tuviera las etiquetas de <script> para poder poner todo el código JS que necesitaba. T luego desde mi página direcciones.html.twig tengo un bloque llamado block js en el cual hago un include() de la siguiente manera:
{% block js %} <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script> {% include 'MainBundle:FrontEnd:mapa/index_map.html.twig' %} {% endblock %}
Y funciona de maravilla! :D
Muchas gracias @javiereguiluz por toda tu ayuda! :D
@MrXXX0323
Me alegro mucho que ya te funcione. Sólo un comentario final: usar include() como etiqueta está declarado obsoleto en Twig y ahora se utiliza como función:
{# antes #} {% include 'MainBundle:FrontEnd:mapa/index_map.html.twig' %} {# ahora #} {{ include('MainBundle:FrontEnd:mapa/index_map.html.twig') }}
Opcionalmente, también puedes usar la notación de bundles de Symfony:
{# antes #} {{ include('MainBundle:FrontEnd:mapa/index_map.html.twig') }} {# ahora #} {{ include('@Main/FrontEnd/mapa/index_map.html.twig') }}
@javiereguiluz
Mil gracias!!! de verdad! :D
@MrXXX0323