Merge pull request #19958 from raccoongang/fix_too_many_rerenders_textbooks

Fix bug: re-render is triggered too many times in textbooks.

cms/static/js/spec/views/textbook_spec.js

@@ -168,6 +168,12 @@ define(["js/models/textbook", "js/models/chapter", "js/collections/chapter", "js
                     expect(this.model.save).not.toHaveBeenCalled();
                 });
 
+                it("does not re-render on cancel", function() {
+                    this.view.render();
+                    this.view.$(".action-cancel").click();
+                    expect(this.view.render.calls.count()).toEqual(1);
+                });
+
                 it("should be possible to correct validation errors", function() {
                     this.view.render();
                     this.view.$("input[name=textbook-name]").val("");
@@ -248,6 +254,23 @@ define(["js/models/textbook", "js/models/chapter", "js/collections/chapter", "js
                 //           expect($inputEl.find(':focus').length).toEqual(1)
                 expect(jQuery.fn.focus).toHaveBeenCalledOnJQueryObject($inputEl);
             });
+
+            it("should re-render when new textbook added", function() {
+                spyOn(this.view, 'render').and.callThrough();
+                this.view.$(".new-button").click();
+                expect(this.view.render.calls.count()).toEqual(1);
+            });
+
+            it("should remove textbook html section on model.destroy", function() {
+                    this.model = new Textbook({name: "Life Sciences", id: "0life-sciences"});
+                    this.collection.add(this.model);
+                    this.view.render();
+                    CMS.URL.TEXTBOOKS = "/textbooks"; // for AJAX
+                    expect(this.view.$el.find('section').length).toEqual(1);
+                    this.model.destroy();
+                    expect(this.view.$el.find('section').length).toEqual(0);
+                    delete CMS.URL.TEXTBOOKS;
+            });
         });
 
         //    describe "ListTextbooks", ->

cms/static/js/views/edit_textbook.js

@@ -7,12 +7,11 @@ define(['js/views/baseview', 'underscore', 'jquery', 'js/views/edit_chapter', 'c
                     var chapters = this.model.get('chapters');
                     this.listenTo(chapters, 'add', this.addOne);
                     this.listenTo(chapters, 'reset', this.addAll);
-                    this.listenTo(chapters, 'all', this.render);
                 },
                 tagName: 'section',
                 className: 'textbook',
                 render: function() {
-                    this.$el.html(this.template({
+                    this.$el.html(this.template({ // xss-lint: disable=javascript-jquery-html
                         name: this.model.get('name'),
                         error: this.model.validationError
                     }));

cms/static/js/views/list_textbooks.js

@@ -3,7 +3,7 @@ define(['js/views/baseview', 'jquery', 'js/views/edit_textbook', 'js/views/show_
             var ListTextbooks = BaseView.extend({
                 initialize: function() {
                     this.emptyTemplate = this.loadTemplate('no-textbooks');
-                    this.listenTo(this.collection, 'all', this.render);
+                    this.listenTo(this.collection, 'change:editing', this.render);
                     this.listenTo(this.collection, 'destroy', this.handleDestroy);
                 },
                 tagName: 'div',
@@ -11,7 +11,7 @@ define(['js/views/baseview', 'jquery', 'js/views/edit_textbook', 'js/views/show_
                 render: function() {
                     var textbooks = this.collection;
                     if (textbooks.length === 0) {
-                        this.$el.html(this.emptyTemplate());
+                        this.$el.html(this.emptyTemplate()); // xss-lint: disable=javascript-jquery-html
                     } else {
                         this.$el.empty();
                         var that = this;
@@ -34,6 +34,7 @@ define(['js/views/baseview', 'jquery', 'js/views/edit_textbook', 'js/views/show_
                     var $sectionEl, $inputEl;
                     if (e && e.preventDefault) { e.preventDefault(); }
                     this.collection.add([{editing: true}]); // (render() call triggered here)
+                    this.render();
             // find the outer 'section' tag for the newly added textbook
                     $sectionEl = this.$el.find('section:last');
             // scroll to put this at top of viewport

cms/static/js/views/show_textbook.js

@@ -5,6 +5,7 @@ define(['js/views/baseview', 'underscore', 'gettext', 'common/js/components/view
                 initialize: function() {
                     this.template = _.template($('#show-textbook-tpl').text());
                     this.listenTo(this.model, 'change', this.render);
+                    this.listenTo(this.model, 'destroy', this.remove);
                 },
                 tagName: 'section',
                 className: 'textbook',
@@ -18,7 +19,7 @@ define(['js/views/baseview', 'underscore', 'gettext', 'common/js/components/view
                     var attrs = $.extend({}, this.model.attributes);
                     attrs.bookindex = this.model.collection.indexOf(this.model);
                     attrs.course = window.course.attributes;
-                    this.$el.html(this.template(attrs));
+                    this.$el.html(this.template(attrs)); // xss-lint: disable=javascript-jquery-html
                     return this;
                 },
                 editTextbook: function(e) {
@@ -29,7 +30,7 @@ define(['js/views/baseview', 'underscore', 'gettext', 'common/js/components/view
                     if (e && e.preventDefault) { e.preventDefault(); }
                     var textbook = this.model;
                     new PromptView.Warning({
-                        title: _.template(gettext('Delete “<%= name %>”?'))(
+                        title: _.template(gettext('Delete “<%- name %>”?'))(
                     {name: textbook.get('name')}
                 ),
                         message: gettext("Deleting a textbook cannot be undone and once deleted any reference to it in your courseware's navigation will also be removed."),