Add region swapOut, beforeSwapOut

marionettejs · Aug 27, 2014 · b619be8 · b619be8
1 parent 2733d48
commit b619be8
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 5 deletions.
diff --git a/docs/marionette.region.md b/docs/marionette.region.md
@@ -383,7 +383,10 @@ and destroying views:
 * "show" / `onShow` - Called on the view instance when the view has been rendered and displayed.
 * "show" / `onShow` - Called on the region instance when the view has been rendered and displayed.
 * "before:swap" / `onBeforeSwap` - Called on the region instance before a new view is shown. NOTE: this will only be called when a view is being swapped, not when the region is empty.
+* "before:swapOut" / `onBeforeSwapOut` - Called on the region instance before a new view swapped in. NOTE: this will only be called when a view is being swapped, not when the region is empty.
 * "swap" / `onSwap` - Called on the region instance when a new view is `show`n. NOTE: this will only be called when a view is being swapped, not when the region is empty.
+* "swapOut" / `onSwapOut` - Called on the region instance when a new view swapped in to replace the currently shown view. NOTE: this will only be called when a view is being swapped, not when the region is empty.
+
 * "before:empty" / `onBeforeEmpty` - Called on the region instance before the view has been emptied.
 * "empty" / `onEmpty` - Called when the view has been emptied.
 

diff --git a/spec/javascripts/region.spec.js b/spec/javascripts/region.spec.js
@@ -88,7 +88,9 @@ describe('region', function() {
       this.MyRegion = Backbone.Marionette.Region.extend({
         el: '#region',
         onShow: function() {},
-        onSwap: function() {}
+        onSwap: function() {},
+        onBeforeSwapOut: function() {},
+        onSwapOut: function() {}
       });
 
       this.MyView = Backbone.View.extend({
@@ -118,6 +120,8 @@ describe('region', function() {
       this.sinon.spy(this.myRegion, 'onShow');
       this.attachHtmlSpy = this.sinon.spy(this.myRegion, 'attachHtml');
       this.swapSpy = this.sinon.spy(this.myRegion, 'onSwap');
+      this.onBeforeSwapOutSpy = this.sinon.spy(this.myRegion, 'onBeforeSwapOut');
+      this.onSwapOutSpy = this.sinon.spy(this.myRegion, 'onSwapOut');
 
       this.myRegion.on('show', this.showSpy);
       this.myRegion.on('before:show', this.regionBeforeShowSpy);
@@ -189,15 +193,23 @@ describe('region', function() {
     });
 
     it('should not trigger a before swap event for the region', function() {
-      expect(this.regionBeforeSwapSpy.callCount).to.equal(0);
+      expect(this.regionBeforeSwapSpy).to.have.not.been.called;
+    });
+
+    it('should not trigger a beforeSwapOut event for the region', function() {
+      expect(this.onBeforeSwapOutSpy).to.have.not.been.called;
+    });
+
+    it('should not trigger a swapOut event for the region', function() {
+      expect(this.onSwapOutSpy).to.have.not.been.called;
     });
 
     it('should not trigger a swap event for the region', function() {
-      expect(this.regionSwapSpy.callCount).to.equal(0);
+      expect(this.regionSwapSpy).to.have.not.been.called;
     });
 
     it('should not call the `onSwap` function on the region', function() {
-      expect(this.swapSpy.callCount).to.equal(0);
+      expect(this.swapSpy).to.have.not.been.called;
     });
 
     it('should return the region', function() {
@@ -235,9 +247,20 @@ describe('region', function() {
         expect(this.swapSpy).to.have.been.calledOn(this.myRegion);
       });
 
-      it('should stil have a view', function() {
+      it('should still have a view', function() {
         expect(this.myRegion.hasView()).to.equal(true);
       });
+
+      it('should trigger a beforeSwapOut event for the region', function() {
+        expect(this.onBeforeSwapOutSpy)
+        .to.have.been.calledOnce
+        .and.to.have.been.calledOn(this.myRegion);
+      });
+
+      it('should trigger a swapOut event for the region', function() {
+        expect(this.onSwapOutSpy).to.have.been.calledOnce
+        .and.to.have.been.calledOn(this.myRegion);
+      });
     });
 
     describe('when passing "preventDestroy" option', function() {

diff --git a/src/marionette.region.js b/src/marionette.region.js
@@ -157,12 +157,17 @@ _.extend(Marionette.Region.prototype, Backbone.Events, {
       view.render();
 
       if (isChangingView) {
+        this.triggerMethod('before:swapOut', this.currentView);
         this.triggerMethod('before:swap', view);
       }
 
       this.triggerMethod('before:show', view);
       Marionette.triggerMethodOn(view, 'before:show');
 
+      if (isChangingView) {
+        this.triggerMethod('swapOut', this.currentView);
+      }
+
       this.attachHtml(view);
       this.currentView = view;