Make output widget reactive.

IPython/html/static/notebook/js/outputarea.js

@@ -400,6 +400,9 @@ define([
             this._append_javascript_error(err, subarea);
             this.element.append(toinsert);
         }
+
+        // Notify others of changes.
+        this.element.trigger('changed');
     };
 
 
@@ -832,6 +835,10 @@ define([
             // them to fire if the image is never added to the page.
             this.element.find('img').off('load');
             this.element.html("");
+
+            // Notify others of changes.
+            this.element.trigger('changed');
+            
             this.outputs = [];
             this.trusted = true;
             this.unscroll_area();

IPython/html/static/widgets/js/widget_output.js

@@ -21,6 +21,21 @@ define([
                 prompt_area: false, 
                 events: this.model.widget_manager.notebook.events, 
                 keyboard_manager: this.model.widget_manager.keyboard_manager });
+
+            // Make output area reactive.
+            var that = this;
+            this.output_area.element.on('changed', function() {
+                that.model.set('contents', that.output_area.element.html());
+            });
+            this.model.on('change:contents', function(){
+                var html = this.model.get('contents');
+                if (this.output_area.element.html() != html) {
+                    this.output_area.element.html(html);
+                }
+            }, this);
+
+            // Set initial contents.
+            this.output_area.element.html(this.model.get('contents'));
         },
         
         _handle_route_msg: function(content) {