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(){