2016-07-11 5 views
3

Если я хотел бы генерировать код JavaScript, а не только HTML, через Jinja2, я застрял в сохранении JS-кода в строке или есть способ для ссылки на скрипт?Как я могу отобразить шаблон JS из визуализированного HTML-шаблона?

Конкретно:

app.py

from flask import Flask, render_template 
app = Flask(__name__) 
app.config['DEBUG'] = True 

@app.route('/') 
def index(): 
    return render_template('index.html', name='Sebastian', color='pink') 

if __name__ == '__main__': 
    app.run() 

index.html

<!DOCTYPE html> 
<html> 
    <head> 
     <meta content="utf-8" http-equiv="encoding"> 
     <script> 
      function myEnterFunction() { 
       element = document.getElementById("demo"); 
       element.style.backgroundColor = "{{ color }}"; 
      } 
     </script> 
    </head> 
    <body> 
     <p>Hello {{ name }}</p> 
     <div onmouseenter="myEnterFunction()"> 
      <p>onmouseenter: 
       <span id="demo">Mouse over me!</span> 
      </p> 
     </div> 
    </body> 
</html> 

Это прекрасно работает, если код JavaScript будет встраиваемыми, но что, если бы мы как оставаться аккуратным и ссылаться на отдельный файл?

<head> 
    <meta content="utf-8" http-equiv="encoding"> 
    <script src="code.js"></script> 
</head> 

?

Возможно, это может быть сделано путем замены src="code.js" с

{% render_template('code.js', color=color) %} 

Вы можете увидеть, как сделать шаблон JS, а вы рендеринга шаблона HTML?

+0

Возможный дубликат [Использовать движок шаблонов Jinja2 в файле внешнего javascript] (http://stackoverflow.com/questions/21956500/use-jinja2-template-engine-in-external-javascript-file) –

+0

Вы правы , Вопрос схож. Но предпочтительный ответ там не подходит, потому что вопрос слишком прост. Здесь также код упрощается для ясности. Причина, по которой альтернативный ответ там «*, вероятно, не очень хорошая идея», не указывается (и не ясна). Ответ здесь прав. – Calaf

ответ

7

Вы можете добавить маршрут, который генерирует JS.

@app.route('/script.js') 
def script(): 
    return render_template('script.js', color='pink') 

И в script.js, это должно быть в той же папке, что и другие шаблоны:

function myEnterFunction() { 
       element = document.getElementById("demo"); 
       element.style.backgroundColor = "{{ color }}"; 
      } 

И в вашем layout.html:

<script src="{{url_for('script')}}"></script> 

Jinja2 разбирает любой файлы, содержащие его синтаксис.

+0

Хорошо работает ... @Sinan Guclu, что, если вы хотите сохранить файл js в папке 'static', как вы ссылаетесь на него в' render_template() '? –

+0

И это возможно? –

+0

@YoungMillie Хотя возможно использование 'render_template_string', это не имело бы большого смысла, если бы у вас не было только одного набора переменных python, которые вы хотели бы визуализировать во всех статических файлах. Существует пример реализации [на этом Gist] (https://gist.github.com/Driptap/25ba392b00c8b0e0dfe88c7b8c180ca7) –

Смежные вопросы