once-displayed

IPython/html/static/widgets/js/widget.js

@@ -275,6 +275,9 define(["widgets/js/manager",
             this.child_views = {};
             this.model.views.push(this);
             this.id = this.id || IPython.utils.uuid();
+            this.on('displayed', function() { 
+                this.is_displayed = true; 
+            }, this);
         },
 
         update: function(){
@@ -386,6 +389,16 define(["widgets/js/manager",
         touch: function () {
             this.model.save_changes(this.callbacks());
         },
+
+        once_displayed: function (callback, context) {
+            // Calls the callback right away is the view is already displayed
+            // otherwise, register the callback to the 'displayed' event.
+            if (this.is_displayed) {
+                callback.apply(context);
+            } else {
+                this.on('displayed', callback, context);
+            }
+        },
     });
 
 

IPython/html/static/widgets/js/widget_container.js

@@ -17,18 +17,6 define([
                 this.update_children(model.previous('children'), value);
             }, this);
             this.update();
-
-            // Trigger model displayed events for any models that are child to 
-            // this model when this model is displayed.
-            var that = this;
-            this.on('displayed', function(){
-                that.is_displayed = true;
-                for (var property in that.child_views) {
-                    if (that.child_views.hasOwnProperty(property)) {
-                        that.child_views[property].trigger('displayed');
-                    }
-                }
-            });
         },
         
         update_children: function(old_list, new_list) {
@@ -49,10 +37,8 define([
             var view = this.create_child_view(model);
             this.$el.append(view.$el);
 
-            // Trigger the displayed event if this model is displayed.
-            if (this.is_displayed) {
-                view.trigger('displayed');
-            }
+            // Trigger the displayed event once this model is displayed.
+            this.once_displayed(function() { view.trigger('displayed'); }, this);
         },
         
         update: function(){
@@ -179,17 +165,6 define([
                 this.update_children(model.previous('children'), value);
             }, this);
             this.update();
-
-            // Trigger model displayed events for any models that are child to 
-            // this model when this model is displayed.
-            this.on('displayed', function(){
-                that.is_displayed = true;
-                for (var property in that.child_views) {
-                    if (that.child_views.hasOwnProperty(property)) {
-                        that.child_views[property].trigger('displayed');
-                    }
-                }
-            });
         },
         
         hide: function() {
@@ -252,10 +227,10 define([
             var view = this.create_child_view(model);
             this.$body.append(view.$el);
 
-            // Trigger the displayed event if this model is displayed.
-            if (this.is_displayed) {
-                view.trigger('displayed');
-            }
+            // Trigger the displayed event once this model is displayed.
+            this.once_displayed(function() { 
+                view.trigger('displayed'); 
+            }, this);
         },
         
         update: function(){