从javascript设置ipython小部件值？答案

【问题标题】：Set an ipython widget value from javascript?从javascript设置ipython小部件值？
【发布时间】：2015-10-09 00:49:06
【问题描述】：

假设在 IPython notebook 中创建了一个 ipywidget，如下所示：

from ipywidgets import widgets
i = widgets.IntText()

有没有办法从 Javascript 中设置值？我怀疑我需要知道小部件的一些 comm id。或者有没有更好的方法在 Python 中使用 Javascript 设置变量？

用例是我想将鼠标点击位置（通过 Javascript 获得）位置发送回 Python。

【问题讨论】：

JavaScript 运行在哪里？节点.js？网络浏览器？
IPython 笔记本在浏览器中运行前端，在服务器上运行后端。我正在寻找一种方法让浏览器中的 Javascript 设置 traitlet 的值，以便可以在服务器上的 Python 中访问该值。
@Quant 好的，但我需要一个链接或更多信息。谢谢！
@DougBlank 无法在评论中添加多行代码 sn-p。我在下面回答了一个简短的例子。

标签： javascript ipython jupyter

【解决方案1】：

感谢 ipython gitter 上的 SylvainCorlay 和 jasongrout，他们能够与我交谈：

clicked = function (evt, x_model, y_model) {
    var e = evt.srcElement.farthestViewportElement || evt.target;
    var dim = e.getBoundingClientRect();
    var x = evt.clientX - dim.left;
    var y = evt.clientY - dim.top;
    var manager = IPython.WidgetManager._managers[0];
    var model_prom = manager.get_model(x_model);
    model_prom.then(function(model) {
        model.set('value', Math.round(x));
        model.save_changes();
    });
    model_prom = manager.get_model(y_model);
    model_prom.then(function(model) {
        model.set('value', Math.round(y));
        model.save_changes();
    });
};

使用事件调用 onclick 的位置，以及 Python x.model_id 和 y.model_id。

【讨论】：

我究竟是如何将 x_model 和 y_model 变量传递给函数的？

【解决方案2】：

您可以使用 ipython jslink 小部件在 JavaScript 端绑定小部件模型。

from ipywidgets import IntText, IntSlider, jslink
from IPython.display import display

text, slider = IntText(), IntSlider()
link = jslink((text, 'value'), (slider, 'value'))
display(text, slider)

如果您想要一个纯 JavaScript 解决方案，您可以使用小部件 ID 从小部件管理器中处理小部件模型。

【讨论】：

Javascript 端是什么样子的？
必须在小部件主干模型上设置该值。 model.set('value', 17);

【解决方案3】：

如果你可以安装 jupyter 代理服务器，你可以使用这个笔记本

https://github.com/gbrault/jpjwidgets

【讨论】：