javascript - 如何通过 JavaScript 在 Bokeh 中设置输入文本字段的值？

Question

我创建了一个像这样的简单输入对象:

self.dummy_text = TextInput()
self.dummy_text.css_classes = ['dummy_text']

我想用另一个控件恢复这个字段的值。例如这个按钮:

self.dummy_button = Button(label="Foo", button_type="success")
self.dummy_button.css_classes = ['dummy_button']

如果我手动更改输入文本字段的值，按钮会很好地获取输入文本值。但是，如果我像这样通过 JavaScript (jQuery) 修改值，则根本不会收到该值:

$("#bokeh_iframe").contents().find(".dummy_text input").val('text value')

我在 iframe 中打开了 bokeh，id 为 bokeh_iframe。我需要使用 find 因为直接选择器不起作用。最后我像这样调用按钮点击方法:

$("#bokeh_iframe").contents().find(".dummy_button button").get(0).click();

按钮方法如下所示:

def dummy_button(self):
    dummy_text_value = self.dummy_text.value

发生了什么事？我需要告诉 Bokeh 以其他方式同步数据吗？我是否必须找到另一种方法来通过 JavaScript 填充该字段？

注意:我需要执行此解决方法以从外部应用程序(Electron，使用 Node 构建)在 bokeh 服务器中运行一些操作

注意 2:另一个元素:prevObject: jQuery.fn.init(1) 与输入和按钮对象一起出现，可能是问题所在吗？这就是为什么我需要使用 get(0)

Answer 1

为了让 BokehJS 机器自动神奇地检测和同步对模型属性(例如输入小部件值)的更改，您通常必须设置 .value 属性 BokehJS 模型对象，而不是通过直接更改 HTML 属性。

但是，Bokeh 从未真正考虑过从“外部”JavaScript 操纵 Bokeh 模型的用例，因此它绝对没有经过优化以使其变得容易或简单。当 Bokeh 在页面中呈现文档时，它会在 window.Bokeh.index 对象中留下顶级 View 的索引。因此，一种绝对可行的方法是遍历该索引树以找到您关心的输入小部件的 Bokeh 模型，然后更新其上的 .value 字段。

但是，在这种特殊情况下，它可能会起作用，以在 HTML 元素上设置值，并显式触发 change 事件:

$("#bokeh_iframe").contents().find(".dummy_text input")
    .val('text value')
    .trigger('change');

那肯定会更容易，但未经测试(遗憾的是，我没有足够的带宽来尝试构建和测试完整的示例。)

---

或者，有一些方法可以使用 CustomJS 回调重新表达您的意图，这将是更可取的，因为 Bokeh 模型可以很容易地用于 CustomJS JavaScript 代码通过 args 属性。