IPython内核JavaScript双向通信的最简示例

Question

我的目标是为IPython编写一个交互式变量查看器，即允许将嵌套的字典/列表以树形结构显示，并可以往下钻取（有点像Javascript中的console.log）。

我花了很多时间尝试从IPython的directview示例中提取出最简代码，但仍然无法理解它是如何工作的。我的Python还可以，但我的jQuery经验相当有限。

因此，我将directview.js剥离到以下内容。

container.show();
var widget = $('<div/>')
element.append(widget);
var output = $('<div></div>');
$(widget).append(output)
var output_area = new IPython.OutputArea(output, false);
var callbacks = { 'output': $.proxy(output_area.handle_output, output_area) };
var code  = 'print 1+1'
var msg_id = IPython.notebook.kernel.execute(code, callbacks, {silent: false}); 

当我加载directview.ipynb时，这个方法可以正常工作。但是，我仍然不清楚如何使它完全独立（即不需要directview.py，并传递一个回调函数而不是IPython.OutputArea的标准handle_output）。其中一个问题是在独立方式下调用container.show()会失败。

我有几个问题：

• 为什么要用element.append(widget)和$(widget).append(output)？还有创建Ipython.OutputArea的必要吗？难道不能只创建<div id=my_output_area>blah</div>，并让回调函数将相关数据填充到它里面吗？
• .proxy到底是什么意思？我想为output创建自己的回调函数，但是当我这样做并console.log()回调函数传递的参数时，它们是undefined或毫无用处的。

我很感激IPython笔记本的作者使用jQuery/websockets创建了这样一个美丽的前端，并创建了开发文档，允许像我这样的初学者进行调整和改进，但如果有人可以帮忙那就太好了！

- joelhoro

Answer 1

我可以回答你的第二个问题。事实上，当JavaScript调用您的回调函数时，它会在不指定上下文的情况下进行，即没有设置this（Pythonista将其称为self）。但是可以通过$.proxy将函数绑定到this，就像您在以下代码中看到的：

var callbacks = { 'output': $.proxy(output_area.handle_output, output_area) };

- Denis Malinovsky