Implement view logic in selection containers.

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

@@ -359,8 +359,6 define(["widgets/js/manager",
             //      Callback that is called for each item added.
 
             // Walk the lists until an unequal entry is found.
-            console.error("Deprecated _do_diff; use a ViewList or similar class instead");
-
             var i;
             for (i = 0; i < new_list.length; i++) {
                 if (i >= old_list.length || new_list[i] !== old_list[i]) {
@@ -605,7 +603,7 define(["widgets/js/manager",
         //   will be called in that context.
 
         this.initialize.apply(this, arguments);
-    }
+    };
 
     _.extend(ViewList.prototype, {
         initialize: function(create_view, remove_view, context) {
@@ -661,7 +659,7 define(["widgets/js/manager",
             this.state_change = this.state_change.then(function() {
                 for (var i = 0, len=that.views.length; i <len; i++) {
                     that._remove_view.call(that._handler_context, that.views[i]);
-                };
+                }
                 that._models = [];
                 that.views = [];
             });

IPython/html/static/widgets/js/widget_selectioncontainer.js

@@ -9,18 +9,23 define([
 ], function(widget, utils, $){
 
     var AccordionView = widget.DOMWidgetView.extend({
+        initialize: function(){
+            AccordionView.__super__.initialize.apply(this, arguments);
+
+            this.containers = [];
+            this.model_containers = {};
+            this.children_views = new widget.ViewList(this.add_child_model, this.remove_child_model, this);
+            this.listenTo(this.model, 'change:children', function(model, value) {
+                this.children_views.update(value);
+            }, this);
+        },
+
         render: function(){
             // Called when view is rendered.
             var guid = 'panel-group' + utils.uuid();
             this.$el
                 .attr('id', guid)
                 .addClass('panel-group');
-            this.containers = [];
-            this.model_containers = {};
-            this.update_children([], this.model.get('children'));
-            this.model.on('change:children', function(model, value, options) {
-                this.update_children(model.previous('children'), value);
-            }, this);
             this.model.on('change:selected_index', function(model, value, options) {
                 this.update_selected_index(model.previous('selected_index'), value, options);
             }, this);
@@ -31,6 +36,7 define([
             this.on('displayed', function() {
                 this.update_titles();
             }, this);
+            this.children_views.update(this.model.get('children'));
         },
 
         update_titles: function(titles) {
@@ -62,14 +68,6 define([
             }
         },
         
-        update_children: function(old_list, new_list) {
-            // Called when the children list is modified.
-            this.do_diff(old_list, 
-                new_list, 
-                $.proxy(this.remove_child_model, this),
-                $.proxy(this.add_child_model, this));
-        },
-
         remove_child_model: function(model) {
             // Called when a child is removed from children list.
             var accordion_group = this.model_containers[model.id];
@@ -128,14 +126,24 define([
                 return view;
             }, utils.reject("Couldn't add child view to box", true));
         },
+        
+        remove: function() {
+            AccordionView.__super__.remove.apply(this, arguments);
+            this.children_views.remove();
+        },
     });
     
 
     var TabView = widget.DOMWidgetView.extend({    
         initialize: function() {
             // Public constructor.
-            this.containers = [];
             TabView.__super__.initialize.apply(this, arguments);
+            
+            this.containers = [];
+            this.children_views = new widget.ViewList(this.add_child_model, this.remove_child_model, this);
+            this.listenTo(this.model, 'change:children', function(model, value) {
+                this.children_views.update(value);
+            }, this);
         },
 
         render: function(){
@@ -149,11 +157,7 define([
             this.$tab_contents = $('<div />', {id: uuid + 'Content'})
                 .addClass('tab-content')
                 .appendTo(this.$el);
-            this.containers = [];
-            this.update_children([], this.model.get('children'));
-            this.model.on('change:children', function(model, value, options) {
-                this.update_children(model.previous('children'), value);
-            }, this);
+            this.children_views.update(this.model.get('children'));
         },
 
         update_attr: function(name, value) {
@@ -161,14 +165,6 define([
             this.$tabs.css(name, value);
         },
 
-        update_children: function(old_list, new_list) {
-            // Called when the children list is modified.
-            this.do_diff(old_list, 
-                new_list, 
-                $.proxy(this.remove_child_model, this),
-                $.proxy(this.add_child_model, this));
-        },
-
         remove_child_model: function(model) {
             // Called when a child is removed from children list.
             var view = this.pop_child_view(model);
@@ -254,6 +250,11 define([
                 .removeClass('active');
             this.containers[index].tab('show');
         },
+        
+        remove: function() {
+            TabView.__super__.remove.apply(this, arguments);
+            this.children_views.remove();
+        },
     });
 
     return {