diff --git a/IPython/html/static/widgets/js/widget.js b/IPython/html/static/widgets/js/widget.js
index 9b2fa4d8a..c04e497ab 100644
--- a/IPython/html/static/widgets/js/widget.js
+++ b/IPython/html/static/widgets/js/widget.js
@@ -277,6 +277,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(){
@@ -388,6 +391,16 @@ define(["widgets/js/manager",
touch: function () {
this.model.save_changes(this.callbacks());
},
+
+ after_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);
+ }
+ },
});
diff --git a/IPython/html/static/widgets/js/widget_container.js b/IPython/html/static/widgets/js/widget_container.js
index f09c1e902..411e48b71 100644
--- a/IPython/html/static/widgets/js/widget_container.js
+++ b/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,10 @@ 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) {
+ // Trigger the displayed event once this view is displayed.
+ this.after_displayed(function() {
view.trigger('displayed');
- }
+ });
},
update: function(){
@@ -179,17 +167,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 +229,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) {
+ // Trigger the displayed event once this view is displayed.
+ this.after_displayed(function() {
view.trigger('displayed');
- }
+ });
},
update: function(){