【问题标题】：Bokeh server callback initiated from Flask application从 Flask 应用程序发起的 Bokeh 服务器回调
【发布时间】：2017-10-05 22:48:41
【问题描述】：

我正在使用 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"

烧瓶应用

使用散景服务器嵌入散景应用。我首先在命令提示符下运行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 %}

【问题讨论】：

您找到解决方法了吗？
@sigurdb 不抱歉，从来没有时间弄清楚如何做到这一点。
是什么阻止您查看现有按钮的来源并使用自己的按钮重新实现该行为？
@AlphaBeta 除了源代码不易阅读之外，什么都没有！当然，解决方案就在那里，但我不确定一个优雅的解决方案。

标签： python flask callback server bokeh

【解决方案1】：

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

$(document).ready(function () {

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

});

上述内容仅适用于您希望保留两个按钮的情况。

【讨论】：

您还可以通过将原始散景按钮设置为 display=none...