keep track of number of components in a vertical

cms/static/js/views/components/add_xblock.js

@@ -15,25 +15,30 @@ define(['jquery', 'underscore', 'gettext', 'js/views/baseview', 'common/js/compo
 
             initialize: function(options) {
                 BaseView.prototype.initialize.call(this, options);
+                that = this;
                 this.template = this.loadTemplate('add-xblock-component');
+                this.model.set({number_children: $('.level-element').length});
+                // this.model.on('change:number_children', function(model){
+                //     console.log('number of children changed!');
+                //     console.log(model.get('number_children'));
+                // }, this.model);
+                this.model.on('change:number_children', this.render, this);
             },
 
             render: function() {
-                if (!this.$el.html()) {
-                    var that = this;
-                    this.$el.html(this.template({}));
-                    this.collection.each(
-                        function(componentModel) {
-                            var view, menu;
+                var that = this;
+                this.$el.html(this.template({numberChildren: that.model.get('number_children')}));
+                this.collection.each(
+                    function(componentModel) {
+                        var view, menu;
 
-                            view = new AddXBlockButton({model: componentModel});
-                            that.$el.find('.new-component-type').append(view.render().el);
+                        view = new AddXBlockButton({model: componentModel});
+                        that.$el.find('.new-component-type').append(view.render().el);
 
-                            menu = new AddXBlockMenu({model: componentModel});
-                            that.$el.append(menu.render().el);
-                        }
-                    );
-                }
+                        menu = new AddXBlockMenu({model: componentModel});
+                        that.$el.append(menu.render().el);
+                    }
+                );
             },
 
             showComponentTemplates: function(event) {
@@ -65,7 +70,9 @@ define(['jquery', 'underscore', 'gettext', 'js/views/baseview', 'common/js/compo
                 ViewUtils.runOperationShowingMessage(
                     gettext('Adding'),
                     _.bind(this.options.createComponent, this, saveData, element)
-                ).always(function() {
+                ).success(function(){
+                    self.model.set({number_children: self.model.get('number_children') + 1});
+                }).always(function() {
                     // Restore the scroll position of the buttons so that the new
                     // component appears above them.
                     ViewUtils.setScrollOffset(self.$el, oldOffset);

cms/static/js/views/pages/container.js

@@ -170,7 +170,8 @@ define(['jquery', 'underscore', 'backbone', 'gettext', 'js/views/pages/base_page
                         var component = new AddXBlockComponent({
                             el: element,
                             createComponent: _.bind(self.createComponent, self),
-                            collection: self.options.templates
+                            collection: self.options.templates,
+                            model: self.model
                         });
                         component.render();
                     });
@@ -288,13 +289,16 @@ define(['jquery', 'underscore', 'backbone', 'gettext', 'js/views/pages/base_page
             onDelete: function(xblockElement) {
                 // get the parent so we can remove this component from its parent.
                 var xblockView = this.xblockView,
-                    parent = this.findXBlockElement(xblockElement.parent());
+                    parent = this.findXBlockElement(xblockElement.parent()),
+                    model = this.model;
                 xblockElement.remove();
 
                 // Inform the runtime that the child has been deleted in case
                 // other views are listening to deletion events.
                 xblockView.acknowledgeXBlockDeletion(parent.data('locator'));
 
+                model.set({number_children: model.get('number_children') - 1});
+
                 // Update publish and last modified information from the server.
                 this.model.fetch();
             },

cms/templates/js/add-xblock-component-nudge.underscore

+<div class="new-component">
+    <h5>This is the nudge</h5>
+    <p>There are <%= numberChildren %> components in this vertical</p>
+    <ul class="new-component-type">
+    </ul>
+</div>

cms/templates/js/add-xblock-component.underscore

 <div class="new-component">
     <h5><%= gettext("Add New Component") %></h5>
+    <p>There are <%= numberChildren %> components in this unit!</p>
     <ul class="new-component-type">
     </ul>
 </div>