Flask app

Question

我正在使用Flask-AppBuilder框架构建应用程序，并使用autoload_server成功嵌入了散景图，将脚本src插入到我的html模板中。目前，我在散景应用程序中有一个小部件按钮，它会触发python回调以更新绘图。我喜欢知道的是，是否可以触发相同的行为，但使用位于烧瓶应用程序内的按钮。在我看来，这应该是可能的，但我只是不知道如何将烧瓶按钮中的UI事件传达给散景服务器。

以下是简化代码。

bokeh.py代码

有一个回调按钮可以将情节从'cos'改为'sin'。

import numpy as np
from bokeh.plotting import figure, output_file, show
from bokeh.io import curdoc, reset_output
from bokeh.layouts import column, row
from bokeh.models import Button 

def plotRoutine(input):

    x = np.linspace(0,10)
    if input=='cos':
        y = np.cos(x)
    if input=='sin':
        y = np.sin(x)

    plot = figure(title = input)
    plot.line(x, y)

    return plot

def callback():
    plot = plotRoutine('sin')
    layout.children[1] = plot

plot = plotRoutine('cos')

button = Button(label="Callback button in bokeh server") 
button.on_click(callback) 

layout = column(button, plot)
curdoc().add_root(layout)
curdoc().title = "bokeh"

Flask app

使用散景服务器嵌入散景应用。我首先在命令提示符下运行bokeh serve --allow-websocket-connection=localhost:5006 --allow-websocket-connection=localhost:8080 bokeh.py以启动散景服务器。然后我在localhost：8080上开始我的烧瓶应用程序。

from flask import render_template, request, g
from flask_appbuilder import ModelView, BaseView, expose, has_access
from bokeh.embed import autoload_server

class Bokeh(BaseView):

    default_view = 'bokeh'

    @expose("/")
    @has_access
    def bokeh(self):
        script = autoload_server(model=None, url="http://localhost:5006/bokeh")
        return self.render_template('bokeh.html', bokeh_script=script)

appbuilder.add_view(Bokeh(), "Bokeh", href="/bokeh/")

Flask bokeh.html模板

有一个按钮，我想以某种方式触发bokeh.py内的回调。

{% extends "appbuilder/base.html" %}
{% block content %}

<script>

    $(document).ready(function () {

        document.getElementById("flaskButton").onclick = function () {

            // CODE HERE TO TRIGGER CALLBACK?

        };

    });

</script>

<div id="bokeh_app">
    {{ bokeh_script|safe }}
</div>

<button id="flaskButton">Callback button in Flask</button>

{% endblock %}

Answer 1

一种快速而肮脏的方法是右键单击浏览器中的“散景”按钮，然后选择“检查元素”。您应该看到已定义的onClick函数。从那里，您应该能够为Flask应用程序中的按钮提供相同的onClick功能：

$(document).ready(function () {

    document.getElementById("flaskButton").onclick = [onClick function from Bokeh button];

});

以上内容仅在您希望同时按住两个按钮的情况下适用。

从Flask应用程序

bokeh.py代码

Flask app

Flask bokeh.html模板

1 个答案: