diff --git a/IPython/html/static/widgets/js/widget.js b/IPython/html/static/widgets/js/widget.js
index c04e497..f5b2995 100644
--- a/IPython/html/static/widgets/js/widget.js
+++ b/IPython/html/static/widgets/js/widget.js
@@ -407,13 +407,15 @@ define(["widgets/js/manager",
var DOMWidgetView = WidgetView.extend({
initialize: function (options) {
// 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);
this.on('displayed', this.show, 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);
+
+ this.update_visible(this.model, this.model.get("visible"));
+ this.update_css(this.model, this.model.get("_css"));
},
on_msg: function(msg) {
@@ -438,19 +440,18 @@ define(["widgets/js/manager",
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.
+ update_visible: function(model, value) {
+ // Update visibility
// The very first update seems to happen before the element is
// finished rendering so we use setTimeout to give the element time
// to render
var e = this.$el;
- var visible = this.model.get('visible');
- setTimeout(function() {e.toggle(visible);},0);
-
- var css = this.model.get('_css');
+ setTimeout(function() {e.toggle(value);},0);
+ },
+
+ update_css: function (model, css) {
+ // Update the contents of this view
+ var e = this.$el;
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 411e48b..04bb5ff 100644
--- a/IPython/html/static/widgets/js/widget_container.js
+++ b/IPython/html/static/widgets/js/widget_container.js
@@ -13,10 +13,9 @@ define([
this.$el.addClass('widget-container')
.addClass('vbox');
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();
},
update_children: function(old_list, new_list) {
@@ -42,14 +41,6 @@ define([
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 +154,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() {