having each pageVw update their state after a dom reattach

Author: rmisio

js/router.js

@@ -158,6 +158,8 @@ module.exports = Backbone.Router.extend({
   },
 
   execute: function(callback, args, name) {
+    console.log(`boom: ${Backbone.history.getFragment()}`);
+
     if (this.historyAction == 'default') {
       this.historyPosition += 1;
       this.historySize = this.historyPosition;
@@ -259,15 +261,12 @@ module.exports = Backbone.Router.extend({
 
     if (cached && (now - cached.cachedAt < cached.view.cacheExpires)) {
       // we have an un-expired cached view, let's reattach it
+      console.log('using cached');
       this.view = cached.view;
 
       $('#content').html(this.view.$el);
       this.view.delegateEvents();
 
-      if (this.view.restoreScrollPosition) {
-        this.$obContainer[0].scrollTop = this.view.__cachedScrollPos || 0;
-      }
-
       // if (this.view.__cachedAddressBarText) {
       //   // ensure our address bar text reflects the state of the cached view
       //   window.obEventBus.trigger('setAddressBar', {'addressText': this.view.__cachedAddressBarText});
@@ -279,7 +278,17 @@ module.exports = Backbone.Router.extend({
         view: this.view,
         route: requestedRoute
       });
+
+      if (this.view.restoreScrollPosition &&
+        this.view.restoreScrollPosition.call(this.view, { route: requestedRoute })) {
+          console.log('restore scroll');
+          this.$obContainer[0].scrollTop = this.view.__cachedScrollPos || 0;
+      } else {
+        console.log('scroll top');
+        this.$obContainer[0].scrollTop = 0;
+      }
     } else {
+      console.log('brand spanking new');
       this.view = new (Function.prototype.bind.apply(View, [null].concat(options.viewArgs)));
       // // clear address bar. Must happen after we set out view above.
       // window.obEventBus.trigger('setAddressBar', options.addressBarText);
@@ -369,6 +378,8 @@ module.exports = Backbone.Router.extend({
   },
 
   home: function(state, searchText){
+    !state && this.navigate('home/products', { replace: true });
+
     this.newView(homeView, {
       viewArgs: {
         userModel: this.userModel,

js/views/homeVw.js

@@ -75,21 +75,34 @@ module.exports = pageVw.extend({
     this.listenTo(app.router, 'cache-reattach', this.onCacheReattach);
   },
 
+  restoreScrollPosition: function(opts) {
+    var splitRoute = opts.route.split('/'),
+        routeSearchText = splitRoute[2] || '',
+        cachedSearchText = this.searchItemsText || '';
+
+    if (splitRoute[1] === this.state) {
+      return true;
+    }
+  },  
+
   onCacheReattach: function(e) {
     var splitRoute = e.route.split('/'),
-        searchText;
+        state;
 
     if (e.view !== this) return;
 
-    if (splitRoute.length > 2 && (searchText = splitRoute[2]) !== this.searchItemsText) {
-      // our view is cached to a search term different than the one the
-      // user is searching for
-      this.searchItems(searchText);
-      this.obContainer[0].scrollTop = 0;
+    if (splitRoute.length > 1) {
+      // if our routed state doesn't equal our state, we'll
+      // reset the scroll position.
+      splitRoute[1] !== this.state && $('#obContainer').scrollTop(0);
+
+      this.setState(splitRoute[1]);
+      splitRoute.length > 2 && splitRoute[2] !== this.searchItemsText &&
+        this.searchItems(splitRoute[2]);
     }
 
     this.obContainer.on('scroll', this.scrollHandler);
-  },
+  },  
 
   onCacheDetach: function(e) {
     if (e.view !== this) return;

js/views/pageVw.js

@@ -5,7 +5,22 @@ var BaseVw = require('./baseVw'),
 
 PageVw = BaseVw.extend({
   cacheExpires: 1000 * 60 * 20,
-  restoreScrollPosition: true
+  
+  // should be function that returns a boolean
+  restoreScrollPosition: function(opts) {
+    var splitRoute = opts.route.split('/');
+
+    // !!!! if state will not be in the second position
+    // in the route of your view (e.g. myPage/<state>) or
+    // your view does not store it's state as a string in
+    // this.state, then overwrite this method.
+
+    if (splitRoute[1] === this.state) {
+      // if our routed state equals our cached state, we would
+      // like to restore the cached scroll position.
+      return true;
+    }
+  }
 });
 
 // this must be a "static" method and overridden as such (if you

js/views/settingsVw.js

@@ -92,7 +92,7 @@ module.exports = pageVw.extend({
     this.firstLoadModerators = true;
 
     this.listenTo(window.obEventBus, 'saveCurrentForm', function(){
-      switch (self._state) {
+      switch (self.state) {
       case 'general':
         self.saveGeneral();
         break;
@@ -121,8 +121,34 @@ module.exports = pageVw.extend({
     this.moderatorCount = 0;
 
     this.fetchModel();
+
+    this.$obContainer = $('#obContainer');
+  },
+
+  onCacheReattach: function(e) {
+    var splitRoute = e.route.split('/'),
+        state;
+
+    if (e.view !== this) return;
+
+    this.blockedUsersScrollHandler &&
+      this.$obContainer.on('scroll', this.blockedUsersScrollHandler);
+
+    if (splitRoute.length > 1) {
+      // if our routed state doesn't equal our state, we'll
+      // reset the scroll position.
+      splitRoute[1] !== this.state && $('#obContainer').scrollTop(0);
+      this.setState(splitRoute[1]);
+    }
   },
 
+  onCacheDetach: function(e) {
+    if (e.view !== this) return;
+
+    this.blockedUsersScrollHandler &&
+      this.$obContainer.off('scroll', this.blockedUsersScrollHandler);
+  },  
+
   fetchModel: function(){
     var self = this;
     this.firstLoadModerators = true;
@@ -346,13 +372,12 @@ module.exports = pageVw.extend({
     });
 
     // implement scroll based lazy loading of blocked users
-    this.$obContainer = this.$obContainer || $('#obContainer');
     this.blockedUsersScrollHandler && this.$obContainer.off('scroll', this.blockedUsersScrollHandler);
     this.blockedUsersScrollHandler = __.throttle(function() {
       var colLen;
 
       if (
-          self.getState() === 'blocked' &&
+          self.state === 'blocked' &&
           blockedUsersCl.length < getBlockedGuids().length &&
           domUtils.isScrolledIntoView(self.$lazyLoadTrigger[0], self.$obContainer[0])
       ) {
@@ -552,7 +577,6 @@ module.exports = pageVw.extend({
   addTabToHistory: function(state){
     //add action to history
     Backbone.history.navigate("#settings/" + state, { replace: true });
-    this.options.state = state;
   },
 
   setTab: function(activeTab, showContent){
@@ -564,7 +588,7 @@ module.exports = pageVw.extend({
 
   setState: function(state){
     if (state){
-      this._state = state;
+      this.state = state;
       this.setTab(this.$('.js-' + state + 'Tab'), this.$('.js-' + state));
 
       if (state == "store") {
@@ -595,15 +619,11 @@ module.exports = pageVw.extend({
         }
       }
     } else {
-      this._state = "general";
+      this.state = "general";
       this.setTab(this.$('.js-generalTab'), this.$('.js-general'));
     }
   },
 
-  getState: function() {
-    return this._state;
-  },
-
   tabClick: function(e){
     var tab = $(e.target).data('tab');
     this.setState(tab);
@@ -1100,9 +1120,8 @@ module.exports = pageVw.extend({
   remove: function() {
     this.blockedUsersVw && this.blockedUsersVw.remove();
 
-    if (this.blockedUsersScrollHandler && this.$obContainer.length) {
+    this.blockedUsersScrollHandler &&
       this.$obContainer.off('scroll', this.blockedUsersScrollHandler);
-    }
 
     this.serverConnectSyncHandler &&
       app.serverConfigs.getActive().off(null, this.serverConnectSyncHandler);

js/views/userPageVw.js

@@ -330,6 +330,14 @@ UserPageVw = pageVw.extend({
     this.listenTo(app.router, 'cache-reattach', this.onCacheReattach);
   },
 
+  restoreScrollPosition: function(opts) {
+    var splitRoute = opts.route.split('/');
+
+    if (splitRoute[2] === this.state) {
+      return true;
+    }
+  },  
+
   onCacheReattach: function(e) {
     var splitRoute = e.route.split('/'),
         state;
@@ -341,10 +349,12 @@ UserPageVw = pageVw.extend({
     $('#obContainer').on('scroll', this.onScroll);
     this.setCustomStyles();
 
-    if (splitRoute.length > 2 && splitRoute[2] !== this.state) {
+    if (splitRoute.length > 2) {
+      // if our routed state doesn't equal our state, we'll
+      // reset the scroll position.
+      splitRoute[2] !== this.state && $('#obContainer').scrollTop(0);
       this.setState(splitRoute[2], splitRoute[3], { replaceState: true });
     }
-
   },
 
   onCacheDetach: function(e) {