Django, синтаксис для вставки Javascript в шаблон - PullRequest
Новая
       7

Django, синтаксис для вставки Javascript в шаблон

0 голосов
/ 25 февраля 2019

Я хотел бы встроить график Bokeh в шаблон Django, используя вывод Json.http://bokeh.pydata.org/en/latest/docs/user_guide/embed.html#json-items

Вывод Json готов к запросу в базе данных.График должен быть представлен в div с определенным идентификатором.

Документация говорит, что использовать вывод Json в шаблоне со следующей функцией кода: 

item = JSON.parse(item_text);
Bokeh.embed.embed_item(item);

Пожалуйста, сообщите правильный синтаксис для использования в шаблоне: 

<div id="title"></div>

<script>
function(response) { return item = JSON.parse( {{plot_json}} ); }
function(item) { Bokeh.embed.embed_item(item); }
</script>

Просмотр файла: 

def home(request):
    plot_json = Price_Charts.objects.using('llweb').values('timeframe_1h').filter(symbol_pair='ETH')
    context = {
    'plot_json': plot_json
    }
    return render(request, "home.html", context)

Ответы [ 2 ]

0 голосов
/ 27 февраля 2019

Может быть, вам поможет этот упрощенный пример jinja2 (протестировано на Bokeh v1.0.4).Запустите его как: 

python myapp.py

Структура файлов и каталогов: 

myapp
   |
   +---myapp.py
   +---templates
        +---index.html

myapp.py 

import io
import json
import jinja2
import numpy as np
from bokeh.plotting import figure, curdoc
from bokeh.embed import json_item
from bokeh.resources import CDN

plot = figure()
plot.line(np.arange(10), np.random.random(10))
curdoc().add_root(plot)

renderer = jinja2.Environment(loader = jinja2.FileSystemLoader(['templates']), trim_blocks = True)
html = renderer.get_template('index.html').render(resources = CDN.render(), item_json_object = json.dumps(json_item(plot)))

filename = 'json_items.html'
with io.open(filename, mode = 'w', encoding = 'utf-8') as f:
    f.write(html)

index.html 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
{{ resources }}
</head>
<body>
<div id="myplot"></div>
<script>
    Bokeh.embed.embed_item({{ item_json_object }}, "myplot");
</script>
</body>
</html>

Кажется, что результат json.dumps(json_item(plot)), переданный в шаблон, уже является объектом JSON, поэтому вы не можете использовать JSON.parse() для него.Или убедитесь, что вы действительно передали строковый объект этой функции.

Документация Bokeh вы ссылаетесь на пример , который отличается от этого в том смысле, что данные графиков загружаются динамически с помощью метода JS fetch () ввремя загрузки страницы в браузере, в то время как здесь данные графиков прикрепляются к странице во время рендеринга шаблона.

0 голосов
/ 25 февраля 2019

Я мало что знаю о Bokeh, но я знаю, что вам нужно убедиться, что объект JSON правильно читается в шаблоне Django как JavaScript, а не автоматически экранируется.Попробуйте autoescape off вместе с синтаксисом Bokeh ' затем '. 

<div id="title"></div>

<script>        
fetch('/plot') 
    .then(function(response) { 
         {% autoescape off %}
             return item = JSON.parse( {{plot_json}} ); 
        {% autoescape on %}
    })
    .then(function(item) { Bokeh.embed.embed_item(item); })
</script>
...