menu.js: Menu view of Backbone.js app, I mostly worked with notification count on upper right corner. Each time a new push is received, the count will be updated with the number in payload, and the upper right corner will be re-rendered.

menu.js

define([
// Application.
"app",
"modules/notification",
"modules/common",
"modules/happ"
],

function(app, Notification, Common, Happ) {

  var Menu = app.module();

Menu.Views.Back = Backbone.View.extend({
  template: "menu/back",

  events: {
    'click .menu-back': 'backOne'
  },

  backOne: function(event) {
    event.preventDefault();
    window.history.back();
            // Restore normal menu, assumes one level of depth.
            app.router.layout.setView('.menu', new Menu.Views.Manager({
              model: app.router.session
            })).render();
          }
        });

    // Takes a redirect url
    Menu.Views.Next = Backbone.View.extend({
      template: "menu/next",

      serialize: function() {
        return {
          link: this.options.link
        };
      }
    });

    Menu.Views.Notification = Backbone.View.extend({
      template: "menu/notification_alert",

      initialize: function(){
        app.on('received_push', this.updateCount, this);
        this.listenTo(app.notifications, 'add', this.updateCount);
        this.collection.on('change:unread', this.updateCount, this);
        this.count = this.collection.where({unread:true}).length;
        _.bind(this.toggleNotifications, this);
      },

      events: {
        'click #notification_alert': 'toggleNotifications',
        'click .menu-right': 'toggleNotifications'
      },

      receivePush: function(count) {
        this.count = count;
        this.render();
      },

      updateCount: function(count){
        if(typeof count === "object"){
          this.count = this.collection.where({unread:true}).length;
        }
        else{
          this.count = count;
        }
        this.render();
      },

      serialize: function() {
        return {
          count: this.count
        };
      },

      toggleNotifications: function(event) {
        event.preventDefault();
        var view = this;

        if($('#notifications').length > 0) {
          $('#modal').hide();
          app.router.layout.removeView('#modal');
          app.router.layout.removeView('.menu');
          app.router.layout.setViews({
            '.menu': new Menu.Views.Manager()
          }).render();
        } else {
          app.router.layout.removeView('.menu');
          app.router.layout.insertViews({
            '.menu': new Menu.Views.Manager({
              left: new Menu.Views.Blank(),
              title: 'Notifications',
              right: new Menu.Views.Text({
                text: 'close',
                callback: function(event) {
                  view.toggleNotifications(event);
                }
              })
            }),
            '#modal': new Notification.Views.Notifications({
              collection: app.notifications
            })
          }).render();
          $('#modal').show();
        }
      }
    });


    // Required, return the module for AMD compliance.
    return Menu;

  });