Login manager model

Question

I'm trying to run a bit of code when my loginManager is logged in. It might be already, or I might be waiting:

var loginManager = chrome.extension.getBackgroundPage().LoginManager;
// If the foreground is opened before the background has had a chance to load, wait for the background.
// This is easier than having every control on the foreground guard against the background not existing.
if (loginManager.get('loggedIn')) {
 // Load foreground when the background indicates it has loaded.
 require(['foreground']);
} else {
 loginManager.once('loggedIn', function () {
 // Load foreground when the background indicates it has loaded.
 require(['foreground']);
 });
}

and here's how loginManager looks:

// TODO: Exposed globally for the foreground. Is there a better way?
var LoginManager = null;
define(['user'], function(User) {
 'use strict';
 var loginManagerModel = Backbone.Model.extend({
 defaults: {
 loggedIn: false,
 user: null
 },
 login: function() {
 if (!this.get('loggedIn')) {
 var user = new User();
 var self = this;
 user.on('loaded', function() {
 self.set('loggedIn', true);
 self.set('user', this);
 self.trigger('loggedIn');
 });
 }
 }
 });
 LoginManager = new loginManagerModel();
 return LoginManager;
});

I was hoping to try out jQuery's .when() as it seemed like it might be applicable here, but I wasn't sure if this was the right scenario since it does not involve AJAX request explicitly --- they're deeper down and at this level I am just triggering custom events.

Answer 1

I would recomend you watch this video about custom events and the Observer Pattern (Pub/Sub) by Jeffery Way. He does a great job of explaining this concept and also provides some good reading materials at the end.

Basically how Pub/Sub works is after completing a task, it tells everyone that is interested, so they can start their tasks.

The following example will provide some clarification on the subject as well:

 init: function() {
 //Set up my Observer Pattern
 var o = $( {} );
 $.subscribe = o.on.bind(o);
 $.unsubscribe = o.off.bind(o);
 $.publish = o.trigger.bind(o);
 //Start here:
 this.login_user();
 },
 veryCoolFunction: function() {
 //Just like that you can create a loop for your triggers, if needed
 $.subscribe( "done/with/this/baby", login_user() );
 //To stop the loop you can just use the unsubscribe. It works like the .on/.off triggers you're familiar with.
 },
 login_user: function() {
 //Do your awesome stuff
 //I'm done "loggingIn", and I'm letting everyone that is subscribed know that.
 //You can also namespace easily with "/" like so: ("LoginManager/background") or ("foreground/done") etc.
 $.publish( "loggedIn" );
 },
 someOtherVeryCoolFunction: function() {
 //When user is logged in, the publish will run, and will trigger this function call:
 //Push the arguments you need with it
 $.subscribe( "loggedIn", this.login( argumentsIfNecessary ) );
 }, 
 login: function( argumentsIfNecessary ) {
 user.on('loaded', function() {
 //You can use your Pub/Sub model anywhere, even in callbacks
 $.publish("done/with/this/baby");
 });
 }