Передача переменных из колбы в JavaScript

Я просмотрел похожие форумы, но не смог заставить работать ни одно из решений. Я пытаюсь передать переменные из фляги в мой файл сценария Java. Эти значения затем будут использоваться для PubNub из моего файла JavaScript.

Вот часть моего кода Python:

@app.route("/mysettings/")
def user_settings(): 
        return render_template('Settings.html',  project_name = session['project_name'] , publish_key = session['publish_key'] , subscribe_key = session['subscribe_key'] )

Вот часть моего кода JavaScript (app.js):

var settings = {
        channel: {{project_name}},
        publish_key: {{publish_key}},
        subscribe_key: {{subscribe_key}}
    };

этот код работает, если я использую его в своем файле Settings.html, но не в файле app.js.

6 ответов

Решение

Ответы mobiusklein довольно хорошие, но есть "взлом", который вы должны рассмотреть. Определите свой метод Javascript для получения параметров и отправки данных в качестве параметров вашей функции.

main.py

@app.route('/')
def hello():
    data = {'username': 'Pang', 'site': 'stackru.com'}
    return render_template('settings.html', data=data)

app.js

function myFunc(vars) {
    return vars
}

settings.html

<html>
    <head>
         <script type="text/javascript" {{ url_for('static', filename='app.js')}}></script>
         <script type="text/javascript">
            myVar = myFunc({{vars|tojson}})
         </script>
    </head>
</html>

Простой способ передачи переменных из представления в колбе в шаблон в файл javascript на простом примере, упомянутом @mauro.

main.py

@app.route('/')
def hello():
    data = {'username': 'Pang', 'site': 'stackru.com'}
    return render_template('settings.html', data=data)

settings.html

<html>
    <head>
         <script type="text/javascript">
            var username = {{ data.username }}
            var site = {{ data.site }}
        </script>
        <script type="text/javascript" src="app.js"></script>
    </head>
</html>

app.js

function myFunc() {
    return username + site
}
<script type="text/javascript">
   var username ='{{ data.username }}'
   var site ='{{ data.site}}'
<script>

Причина в том, что jinja2 должен использоваться для выполнения подстановки, что, по-видимому, из вашего кода не происходит.

Скорее всего, вы служите app.js как статический файл, что означает, что он никогда не просматривается механизмом шаблонного движка, а просто подается как есть.

Вы можете выполнить то, что вы описываете, служа app.js с URL, который связан с действием, которое передает содержимое app.js через колбу render_template функция, выполняющая jinja2 замены и вся другая информация о настройке, но это означает, jinja2 должен проанализировать весь файл, который может быть дорогим.

Вы можете попытаться передать эти переменные, используя запрос AJAX, на который отвечает действие, которое отправляет те же данные в JSON. Это гораздо более распространенная практика, и она имеет дополнительную ценность, делая эти данные видимыми для других ресурсов.

В этом случае вам фактически не нужно отправлять свои данные с помощью render_template(), потому что ваши данные уже сохранены в вашем сеансе. Данные вашего сеанса уже доступны для шаблона jinja2. (Возможно, вам не удастся импортировать его из app.js. Возможно, вам потребуется явно включить весь код в «Settings.html».)

main.py

      @app.route("/mysettings/")
def user_settings(): 
    return render_template('Settings.html')

настройки.html

      <script type="text/javascript">
var settings = {
    channel: {{ session.project_name }},
    publish_key: {{ session.publish_key }},
    subscribe_key: {{ session.subscribe_key }}
};
</script>

У меня возникли проблемы при попытке передать списки Python из моего приложения Flask в мой внешний файл Javascript (приложение Python / Flask -> HTML -> Javascript).

Вот как я заставил это работать ...

app.py

      from flask import Flask, render_template, request, redirect, json

@app.route("/login", methods=["POST"])
def login():

    max = 400

    bar_labels = ['JAN', 'FEB', 'MAR', 'APR',
                  'MAY', 'JUN', 'JUL', 'AUG',
                  'SEP', 'OCT', 'NOV', 'DEC']

    bar_values = [967.67, 1190.89, 1079.75, 1349.19,
                  2328.91, 2504.28, 2873.83, 4764.87,
                  4349.29, 6458.30, 9907, 16297]

    return render_template('profile.html', 
                            labels=json.dumps(bar_labels), 
                            values=json.dumps(bar_values), 
                            headings=headings, data=data)

profile.html

      .
.
.
<script type="text/javascript"> window.max = JSON.parse({{ max | tojson }});
                                window.values = JSON.parse({{ values | tojson }});
                                window.labels = JSON.parse({{ labels | tojson }})</script>
<script src="{{url_for('static', filename='main.js')}}"></script>
.
.
.

main.js

      window.onload=function(){
    console.log(max)
    console.log(labels)
    console.log(values)
};
Другие вопросы по тегам