diff --git a/IPython/html/static/widgets/js/widget.js b/IPython/html/static/widgets/js/widget.js
index 99a187762..9c54960ef 100644
--- a/IPython/html/static/widgets/js/widget.js
+++ b/IPython/html/static/widgets/js/widget.js
@@ -405,17 +405,19 @@ define(["widgets/js/manager",
var DOMWidgetView = WidgetView.extend({
- initialize: function (options) {
+ initialize: function (parameters) {
// Public constructor
-
- // In the future we may want to make changes more granular
- // (e.g., trigger on visible:change).
- this.model.on('change', this.update, this);
- this.model.on('msg:custom', this.on_msg, this);
- DOMWidgetView.__super__.initialize.apply(this, arguments);
+ DOMWidgetView.__super__.initialize.apply(this, [parameters]);
this.on('displayed', this.show, this);
+ this.after_displayed(function() {
+ this.update_visible(this.model, this.model.get("visible"));
+ this.update_css(this.model, this.model.get("_css"));
+ }, this);
+ this.model.on('msg:custom', this.on_msg, this);
+ this.model.on('change:visible', this.update_visible, this);
+ this.model.on('change:_css', this.update_css, this);
},
-
+
on_msg: function(msg) {
// Handle DOM specific msgs.
switch(msg.msg_type) {
@@ -432,25 +434,20 @@ define(["widgets/js/manager",
// Add a DOM class to an element.
this._get_selector_element(selector).addClass(class_list);
},
-
+
remove_class: function (selector, class_list) {
// Remove a DOM class from an element.
this._get_selector_element(selector).removeClass(class_list);
},
-
- update: function () {
- // Update the contents of this view
- //
- // Called when the model is changed. The model may have been
- // changed by another view or by a state update from the back-end.
- // The very first update seems to happen before the element is
- // finished rendering so we use setTimeout to give the element time
- // to render
+
+ update_visible: function(model, value) {
+ // Update visibility
+ this.$el.toggle(value);
+ },
+
+ update_css: function (model, css) {
+ // Update the css styling of this view.
var e = this.$el;
- var visible = this.model.get('visible');
- setTimeout(function() {e.toggle(visible);},0);
-
- var css = this.model.get('_css');
if (css === undefined) {return;}
for (var i = 0; i < css.length; i++) {
// Apply the css traits to all elements that match the selector.
diff --git a/IPython/html/static/widgets/js/widget_container.js b/IPython/html/static/widgets/js/widget_container.js
index ce001e0d5..a54fe9b8c 100644
--- a/IPython/html/static/widgets/js/widget_container.js
+++ b/IPython/html/static/widgets/js/widget_container.js
@@ -8,21 +8,23 @@ define([
], function(widget, $){
var ContainerView = widget.DOMWidgetView.extend({
- render: function(){
- // Called when view is rendered.
- this.$el.addClass('widget-container')
- .addClass('vbox');
+ initialize: function(){
+ // Public constructor
+ ContainerView.__super__.initialize.apply(this, arguments);
this.update_children([], this.model.get('children'));
- this.model.on('change:children', function(model, value, options) {
+ this.model.on('change:children', function(model, value) {
this.update_children(model.previous('children'), value);
}, this);
- this.update();
+ },
+
+ render: function(){
+ // Called when view is rendered.
+ this.$el.addClass('widget-container').addClass('vbox');
},
update_children: function(old_list, new_list) {
// Called when the children list changes.
- this.do_diff(old_list,
- new_list,
+ this.do_diff(old_list, new_list,
$.proxy(this.remove_child_model, this),
$.proxy(this.add_child_model, this));
},
@@ -37,19 +39,11 @@ define([
var view = this.create_child_view(model);
this.$el.append(view.$el);
- // Trigger the displayed event once this view is displayed.
+ // Trigger the displayed event of the child view.
this.after_displayed(function() {
view.trigger('displayed');
});
},
-
- update: function(){
- // Update the contents of this view
- //
- // Called when the model is changed. The model may have been
- // changed by another view or by a state update from the back-end.
- return ContainerView.__super__.update.apply(this);
- },
});
@@ -163,10 +157,9 @@ define([
this.popped_out = true;
this.update_children([], this.model.get('children'));
- this.model.on('change:children', function(model, value, options) {
+ this.model.on('change:children', function(model, value) {
this.update_children(model.previous('children'), value);
}, this);
- this.update();
},
hide: function() {
@@ -213,8 +206,7 @@ define([
update_children: function(old_list, new_list) {
// Called when the children list is modified.
- this.do_diff(old_list,
- new_list,
+ this.do_diff(old_list, new_list,
$.proxy(this.remove_child_model, this),
$.proxy(this.add_child_model, this));
},
@@ -229,7 +221,7 @@ define([
var view = this.create_child_view(model);
this.$body.append(view.$el);
- // Trigger the displayed event once this view is displayed.
+ // Trigger the displayed event of the child view.
this.after_displayed(function() {
view.trigger('displayed');
});
diff --git a/IPython/html/static/widgets/js/widget_selectioncontainer.js b/IPython/html/static/widgets/js/widget_selectioncontainer.js
index e96722ebf..ed6bfe2be 100644
--- a/IPython/html/static/widgets/js/widget_selectioncontainer.js
+++ b/IPython/html/static/widgets/js/widget_selectioncontainer.js
@@ -30,14 +30,6 @@ define([
var that = this;
this.on('displayed', function() {
this.update_titles();
- // Trigger model displayed events for any models that are child to
- // this model when this model is displayed.
- that.is_displayed = true;
- for (var property in that.child_views) {
- if (that.child_views.hasOwnProperty(property)) {
- that.child_views[property].trigger('displayed');
- }
- }
}, this);
},
@@ -127,10 +119,10 @@ define([
this.update();
this.update_titles();
- // Trigger the displayed event if this model is displayed.
- if (this.is_displayed) {
+ // Trigger the displayed event of the child view.
+ this.after_displayed(function() {
view.trigger('displayed');
- }
+ });
},
});
@@ -158,17 +150,6 @@ define([
this.model.on('change:children', function(model, value, options) {
this.update_children(model.previous('children'), value);
}, this);
-
- // 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');
- }
- }
- });
},
update_children: function(old_list, new_list) {
@@ -222,10 +203,10 @@ define([
.appendTo(this.$tab_contents);
view.parent_container = contents_div;
- // Trigger the displayed event if this model is displayed.
- if (this.is_displayed) {
+ // Trigger the displayed event of the child view.
+ this.after_displayed(function() {
view.trigger('displayed');
- }
+ });
},
update: function(options) {