Estoy usando una botella para un sitio web muy simple de una página. En mi ruta para '/', tengo algo como esto:
@app.route('/') def index(): data = [['A', 1], ['B', 2], ['C', 3]] return template('index.tpl', data=data) Luego, en mi plantilla index.tpl , quiero usar estos datos en un script que se encuentra en <head></head> :
<head> <script type="text/javascript"> function doSomething(some_data) { return some_data[0]; } function myFunc() { var test = doSomething({{data}}); console.log(test); } </script> </head> Sin embargo, esta línea: doSomething({{data}}) provoca un error de sintaxis: ',' expected. Declaration or statement expected.
La única forma en que puedo evitarlo es agregar citas como esta: doSomething('{{data}}') , pero luego se vuelve completamente inútil porque ahora es una cadena, y tengo que volver a convertirlo al formato que necesito .
He visto muchas soluciones en StackOverflow que usan {{data}} directamente en JS sin necesidad de comillas, así que no entiendo por qué no me funciona. ¿Esto se debe a la ubicación de mi script?
Consulte view-source: o print() en la plantilla renderizada que está sirviendo:
<head> <script type="text/javascript"> function doSomething(some_data) { return some_data[0]; } function myFunc() { var test = doSomething([['A', 1], ['B', 2], ['C', 3]]); console.log(test); } </script> </head> Puede ver que el carácter especial no es JS válido, y aunque recibo un error ligeramente diferente al suyo ( Uncaught SyntaxError: Unexpected token '&' ), creo que estamos en la misma página lo suficiente como para ofrecer una respuesta.
Los documentos dicen:
El motor
SimpleTemplateescapa automáticamente de los caracteres especiales de HTML en las expresiones{{bad_html}}. Utilice la nueva sintaxis{{!good_html}}para obtener el comportamiento anterior (sin escape).
Hagamoslo:
<head> <script type="text/javascript"> function doSomething(some_data) { return some_data[0]; } function myFunc() { var test = doSomething({{!data}}); // ^ changed console.log(test); } </script> </head>Ahora obtenemos un resultado limpio:
<head> <script type="text/javascript"> function doSomething(some_data) { return some_data[0]; } function myFunc() { var test = doSomething([['A', 1], ['B', 2], ['C', 3]]); // ^ changed console.log(test); } </script> </head>Para completar, aquí está mi código Bottle 0.12.19:
from bottle import route, run, template @route('/') def index(): data = [['A', 1], ['B', 2], ['C', 3]] print(template('index.tpl', data=data)) return template('index.tpl', data=data) run(host='localhost', port=8080)