jQuery BBQ Backbone Widget

AWidgetView.js

define([
  "backbone",
  "jquery",
  "underscore",
  "js/lib/util",
  "js/lib/jquery.bbq"
  ],
function(Backbone, $, _, util, bbq) {

  var WIDGET_INFIX = '-state-';

  var WidgetView = Backbone.View.extend({    

    getWidgetId: function() {
      this.widgetId = this.widgetId || this.options.widgetId || _.uniqueId();
      return this.widgetId;
    },

    getWidgetKey: function(key) {
      return this.getWidgetId() + WIDGET_INFIX + key;
    },

    addWidgetStateListener: function() {
      var self = this;

      function getHashParams(url) {
        if (url.indexOf('#') > -1) {
          var params = $.deparam(url.split('#')[1]);
          _.each(params, function(value, key) {
            if (key.indexOf(WIDGET_INFIX) == -1) delete params[key];
          });
          return params;
        }
        return {};
      }

      var oldURL = window.location.href;
      var newURL;

      $(window).bind( "hashchange", function(e) {
        newURL = window.location.href;
        var oldParams = getHashParams(oldURL);
        var newParams = getHashParams(newURL);
        /* Figure out what params changed between the new and old params.
         * Note that we dont care if something existed before and no longer does,
         * because that currently never happens.*/
        var changedParams = [];
        _.each(newParams, function(value, key) {
          if (oldParams[key] && oldParams[key] !== value) {
            changedParams.push(key);
          }
        });

        changedParams = _.union(changedParams, _.difference(_.keys(newParams), _.keys(oldParams)));
        changedParams = _.map(changedParams, function(key) {
          return key.split(WIDGET_INFIX)[1]
        });
        self.trigger('widget:changed', changedParams);
        oldURL = window.location.href;
      });   
    },

    getWidgetState: function(key) {
      return $.bbq.getState(this.getWidgetKey(key));
    },

    changeWidgetState: function(params) {
      var self = this;
      var state = {};
      _.each(params, function(value, key) {
        state[self.getWidgetKey(key)] = value;
      });
      $.bbq.pushState(state);
    }
  });
  return WidgetView;
});

ForumThreadsView.js

define([
  "backbone",
  "jquery",
  "underscore",
  "pages/forum/app",
  "pages/forum/views/WidgetView",
  "pages/forum/views/ForumThreadsView.html"
  ],
function(Backbone, $, _, Coursera, WidgetView, ForumThreadsTemplate, ForumThreadsModel) {
 
  var view = WidgetView.extend({
 
    events: {
      'click .course-forum-thread-paginator': 'onPageClick'
    },
 
    initialize: function() {
      var self = this;
 
      this.forum = this.model;
      this.forumThreads = this.options.threads;
      this.forumThreads.bind('change', this.render, this);
 
      var pageNum = this.getWidgetState('page_num') || 1;
      this.forumThreads.loadPage(pageNum);
 
      self.addWidgetStateListener();
      self.bind('widget:changed', function(changedParams) {
        if (_.contains(changedParams, 'page_num')) {
          self.changePage(self.getWidgetState('page_num'));
        }
      });
    },
 
    render: function() {
      this.$el.html(ForumThreadsTemplate({
        user: Coursera.user,
        forum: this.forum,
        forumThreads: this.forumThreads
      }));
      return this;
    },
 
    onPageClick: function(e) {
      this.changeWidgetState({'page_num': $(e.target).attr('data-page-num')});
    },
 
    changePage: function(pageNum) {
      var self = this;
      self.forumThreads.loadPage(pageNum)
        .done(function() {
          $('html,body').scrollTop(self.$el.position().top);
        });
    }
 
  });
 
  return view;
});