Can I use jQuery's .when() to make this code DRY?

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");
        });
    }