Fix #118 remove event handlers needs to be called before add handlers under client mode when remove from the current page

Author: wyuenho

lib/backbone-pageable.js

@@ -91,6 +91,29 @@
     return params;
   }
 
+  // hack to make sure the whatever event handlers for this event is run
+  // before func is, and the event handlers that func will trigger.
+  function runOnceAtLastHandler (col, event, func) {
+    var eventHandlers = col._events[event];
+    if (eventHandlers && eventHandlers.length) {
+      var lastHandler = eventHandlers[eventHandlers.length - 1];
+      var oldCallback = lastHandler.callback;
+      lastHandler.callback = function () {
+        try {
+          oldCallback.apply(this, arguments);
+          func();
+        }
+        catch (e) {
+          throw e;
+        }
+        finally {
+          lastHandler.callback = oldCallback;
+        }
+      };
+    }
+    else func();
+  }
+
   var PARAM_TRIM_RE = /[\s'"]/g;
   var URL_TRIM_RE = /[<>\s'"]/g;
 
@@ -413,22 +436,10 @@
               pageCol.at(pageSize) :
               null;
             if (modelToRemove) {
-              var addHandlers = collection._events.add || [],
-              popOptions = {onAdd: true};
-              if (addHandlers.length) {
-                var lastAddHandler = addHandlers[addHandlers.length - 1];
-                var oldCallback = lastAddHandler.callback;
-                lastAddHandler.callback = function () {
-                  try {
-                    oldCallback.apply(this, arguments);
-                    pageCol.remove(modelToRemove, popOptions);
-                  }
-                  finally {
-                    lastAddHandler.callback = oldCallback;
-                  }
-                };
-              }
-              else pageCol.remove(modelToRemove, popOptions);
+              var popOptions = {onAdd: true};
+              runOnceAtLastHandler(collection, event, function () {
+                pageCol.remove(modelToRemove, popOptions);
+              });
             }
           }
         }
@@ -450,7 +461,11 @@
 
             var nextModel, removedIndex = options.index;
             if (collection == pageCol) {
-              if (nextModel = fullCol.at(pageEnd)) pageCol.push(nextModel);
+              if (nextModel = fullCol.at(pageEnd)) {
+                runOnceAtLastHandler(pageCol, event, function () {
+                  pageCol.push(nextModel);
+                });
+              }
               fullCol.remove(model);
             }
             else if (removedIndex >= pageStart && removedIndex < pageEnd) {
@@ -468,13 +483,13 @@
           collection = model;
 
           // Reset that's not a result of getPage
-          if (collection === pageCol && options.from == null &&
+          if (collection == pageCol && options.from == null &&
               options.to == null) {
             var head = fullCol.models.slice(0, pageStart);
             var tail = fullCol.models.slice(pageStart + pageCol.models.length);
             fullCol.reset(head.concat(pageCol.models).concat(tail), options);
           }
-          else if (collection === fullCol) {
+          else if (collection == fullCol) {
             if (!(state.totalRecords = fullCol.models.length)) {
               state.totalRecords = null;
               state.totalPages = null;

test/client-pageable.js

@@ -325,25 +325,52 @@ $(document).ready(function () {
     strictEqual(col.length, 0)
   });
 
-  test("add handlers are run before remove handlers", 2, function () {
-    var addRan = false;
-    var onAdd = function () {
-      addRan = true;
-    };
-    var onRemove = function () {
-      strictEqual(addRan, true);
-      addRan = false;
-    };
+  test("add handlers on pageCol are run before remove handlers", 2, function () {
     var col = new Backbone.PageableCollection(models, {
       state: {
         pageSize: 1
       },
       mode: "client"
     });
-    col.on("add", onAdd);
-    col.on("remove", onRemove);
+
+    var queue = [];
+    col.on("add", function () {
+      queue.push("add");
+    });
+    col.on("remove", function () {
+      queue.push("remove");
+    });
+
     col.unshift(new Backbone.Model({name: "d"}));
+    deepEqual(queue, ["add", "remove"]);
+
+    queue = []
     col.fullCollection.unshift(new Backbone.Model({name: "e"}));
+    deepEqual(queue, ["add", "remove"]);
+  });
+
+  test("remove handlers on pageCol are run before add handlers", 2, function () {
+    var col = new Backbone.PageableCollection(models, {
+      state: {
+        pageSize: 1
+      },
+      mode: "client"
+    });
+
+    var queue = [];
+    col.on("add", function () {
+      queue.push("add");
+    });
+    col.on("remove", function () {
+      queue.push("remove");
+    });
+
+    col.remove(col.at(0));
+    deepEqual(queue, ["remove", "add"]);
+
+    queue = [];
+    col.fullCollection.remove(col.at(0));
+    deepEqual(queue, ["remove", "add"]);
   });
 
   test("change", 6, function () {