title: Minimalistic example of IPython kernel javascript bi-directional communication
body: <p>My goal is to write an interactive variable viewer for IPython, i.e. which allows one to see, say nested dicts/lists as a tree, and drill down (a bit like the console.log in Javascript).</p>
  
  <p>I spent a lot of time trying to extract minimalistic code out of the directview example in IPython but still can't get my head around how it all works. My Python's ok but my jQuery experience is quite limited.</p>
  
  <p>So I got to stripping down directview.js to the following</p>
  
  <pre><code>container.show();
  var widget = $('&lt;div/&gt;')
  element.append(widget);
  var output = $('&lt;div&gt;&lt;/div&gt;');
  $(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}); 
  </code></pre>
  
  <p>This works when I load the directview.ipynb. However I am still not clear how to make it completely standalone (i.e. not require the directview.py, and pass another callback than the standard <code>handle_output</code> of <code>IPython.OutputArea</code>). One of the issues is the <code>container.show()</code> which fails when called in a standalone way.</p>
  
  <p>I am lost on several aspects:</p>
  
  <ul>
  <li>Why is there an <code>element.append(widget)</code> and then <code>$(widget).append(output)</code>? Also why is there also a need to create an <code>Ipython.OutputArea</code>. Isn't there a way to just create a <code>&lt;div id=my_output_area&gt;blah&lt;/div&gt;</code> and then have the <code>output</code> callback fill it with the relevant data?</li>
  <li>What's the whole .proxy thing about? I would like to create my own callback for <code>output</code> but when I do that and <code>console.log()</code> the arguments passed to the callback, they're <code>undefined</code> or just useless.</li>
  </ul>
  
  <p>I appreciate that the authors of the IPython notebook have done an incredible job creating such a beautiful front-end using jQuery/websockets, and that creating developer documentation that allows beginners like me to tweak with it is asking much, but if anyone can lend a hand that would be great!</p>