将 Bokeh 服务器与其他 javascript 库接口答案

【问题标题】：Interface Bokeh server with other javascript library将 Bokeh 服务器与其他 javascript 库接口
【发布时间】：2018-08-23 01:20:26
【问题描述】：

您能否将bokeh 服务器与客户端的JQuery 等Javascript 库接口？

我想实现一个高级表单，并且已经运行了一个 Bokeh 服务器应用程序。

但是，随着越来越多的工作完成，我在使用 Bokeh API 时遇到了许多问题，例如缺少功能（回调、选项等）、未解决的错误、不稳定等等。

我得出的结论是，应用程序的某些部分最好使用 Bokeh（图形），而其他部分（例如表单）使用更专用的 API（例如纯 Javascript）实现。

这是可行的，甚至是推荐的吗？如果有，该怎么做？

我看到在散景中存在一个Ajax data source，但我不确定它是为散景服务器和客户端 JS 页面之间的通信而制作的。

感谢任何建议、解释或示例，

谢谢

【问题讨论】：

标签： javascript bokeh language-interoperability

【解决方案1】：

您绝对可以做到这一点 - 我能够使 Bokeh 与在 ClojureScript + re-frame 中创建的输入小部件一起工作。

有两种方法可以解决这个问题：

为相关表单/输入创建ColumnDataSource。在表单/输入的 JS 代码中，您将能够查询值并设置新值（之后不要忘记调用 data_source.change.emit()）
为相关表单/输入 (examples) 创建单独的 Bokeh 模型，其中每个字段将映射到表单或输入中的相应值。在这种情况下，您无需调用emit - 您只需设置值即可

到目前为止，这两种方法都存在相同的问题 - 由于bokeh/issues/3117 和 bokeh/issues/3349，您不能将任意模型（无论是 ColumnDataSource 还是某些自定义模型）添加到 Bokeh 文档中，但您可以为此创建自定义模型：

from bokeh.core.properties import Instance, List
from bokeh.model import Model, DataSource


class DataSourceRoot(Model):
    sources = List(Instance(DataSource))

    __implementation__ = TypeScript("""
    import {DOMView} from "core/dom_view"
    import {Model} from "model"
    import * as p from "core/properties"

    export class DataSourceRootView extends DOMView {
        renderTo(element, replace=false): void {}
    }

    export class DataSourceRoot extends Model {
    }

    DataSourceRoot.prototype.type = 'DataSourceRoot';
    DataSourceRoot.prototype.default_view = DataSourceRootView;
    DataSourceRoot.define({
        sources: [ p.Any ]
    })
    """)

然后你就可以写这样的东西了：

source_root = DataSourceRoot()
curdoc().add_root(source_root)

source_root.sources.append(ColumnDataSource(id='my-source', data=dict(a=[1])))

并像这样在 JS 端使用它：

// Note the unfortunate `[0]` - right now Bokeh doesn't have a way
// to get a document by some ID
console.log(Bokeh.documents[0].get_model_by_id('my-source').data['a']);

【讨论】：