首次访问页面时,Flask 不加载散景图 (HTMX)

Flask does not load Bokeh plot when first time visiting page (HTMX)

提问人:btgorman 提问时间:11/17/2023 最后编辑:btgorman 更新时间:11/17/2023 访问量:34

问:

我正在使用 flask 文件 (run_server.py) 在 index.html 和 home.html 之间交替(下面提供的代码)。

有一个 HTMX 按钮可以将我从 index.html 带到 home.html。还有一个类似的按钮可以将我从 home.html 带到 index.html。

我第一次从 index.html 转到 home.html 时,嵌入的散景图没有显示。但是每次我从 index.html 转到 home.html 时,情节都会按照我的预期显示。为什么第一次不显示?

run_server.py

from flask import Flask, render_template

from bokeh.plotting import figure
from bokeh.embed import components
from bokeh.resources import CDN

p = figure(width=300, height=300, tools='pan,reset,save')
p.circle([1, 2.5, 3, 2], [2, 3, 1, 1.5], radius=0.3, alpha=0.5)
cscript, cdiv = components(p)

app = Flask(__name__)

@app.route('/', methods=['GET'])
def page_index():
    return render_template('index.html')

@app.route('/home', methods=['GET'])
def page_home():
    return render_template('home.html',
                           script=cscript,
                           div=cdiv,
                           resources=CDN.render())

索引.html

<html>

<script src="https://unpkg.com/[email protected]"></script>

<body>

    <p>"This is index.html"</p>

    <button class='btn' hx-get="/home" hx-target="body">
        Click Me!
    </button>

</body>
</html>

Home.HTML(这个有散景图)

<p>"This is home.html"</p>

<button class='btn' hx-get="/" hx-target="body">
    Click Me!
</button>

<div id="bokeh_plot_1">
    {{ resources | safe }}
    {{ script | safe }}
    {{ div | safe }}
</div>
python html 烧瓶 散景 htmx

评论


答:

0赞 mariodev 11/17/2023 #1

您需要从 index.html 加载 js cdn 资源(最好在 head 标签内)。

一旦浏览器加载了主要资源,那么 htmx 将从 ajax 响应中正确处理脚本。