2014-02-07 3 views
21

Как передать данные jinja2 в javascript. У меня есть фальшивка REST url как /logs/<test_case_name> Я пытаюсь использовать .getJSON() для запроса вышеуказанного URL-адреса и, следовательно, хотел бы передать данные jinja2, у которого есть testcasename для функции .getJSON.Невозможно передать переменные jinja2 в javascript snippet

Пример кода:

<script type="text/javascript"> 
    alert({{name}}); 
</script> 

Это не работает. Любые предложения, пожалуйста?

+2

'{{имя | сейф} } 'должен работать –

+0

@JakobBowyer - это dint wo rk :( – deeshank

+0

его вообще плохая идея смешать язык шаблона с javascript. Альтернативой было бы использовать html в качестве прокси-сервера - сохранить имя в элементе типа , затем в javascript do djangoData = $ ('# my-data'). data(); – rikAtee

ответ

34

кроме герметизирующего переменных в строке, альтернативный является JQuery для получения прибыли:

его вообще плохая идея смешивать язык шаблонов с помощью JavaScript. В качестве альтернативы можно использовать HTML в качестве прокси - сохранить имя в элементе, как так

<meta id="my-data" data-name="{{name}}" data-other="{{other}}"> 

затем в Javascript сделать

var djangoData = $('#my-data').data(); 

это имеет преимущество в:

  • JavaScript больше не привязаны к странице .html.
  • jquery неявно кодирует данные
+0

Спасибо @rikAtee. Я следовал той же логике. Просто я использовал обычный div. – deeshank

+0

Это работает, но я думаю, что это очень сложный метод - ваш html-файл будет раздуваться атрибутами данных, я думаю, что ответ ниже (ndpk's) - лучший подход – jonprasetyo

+0

Niiiice! Теперь я могу полностью изолировать * html * от * javacript *. Это позволит мне провести чистую интеграцию с Flask-Assets. Благодаря! –

42

Попробуйте цитаты:

alert("{{name}}"); 
+3

сделал волшебство! :) – deeshank

+5

Я думаю, что это не работает, если 'name' содержит разрывы строк, такие как '\ n'. Он будет вызывать синтаксическую ошибку javascript. –

0

Это, как я это сделал

Мой HTML Элемент

<!--Proxy Tag for playlist data--> 
<meta id="my_playlist_data" data-playlist="{{ playlist }}"> 

Мой сценарий элемент

// use Jquery to get data from proxy Html element 
var playlist_data = $('#my_playlist_data').data("playlist"); 

См .data() documenttation более

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