how to use backbone.js and implement FB.Event.subscribe

Question

I am using backbone.js to implement a login page with a facebook login button.

window.LoginPage = Backbone.View.extend({
    initialize:function () {
        this.template = _.template(tpl.get('login-page'));
    },

    render:function (eventName) {
        $(this.el).html(this.template(this.model.toJSON()));
         this.bind("nav", this.nav,this);
         this.model.bind("reset", this.render, this);
        return this;
    },

    events:{
        "click #login":"login"
    },



    login:function(){
          FB.login(
                 function(response) {
                   if (response.authResponse) {
                   console.log('Welcome!  Fetching your information.... ');
                   FB.api('/me', function(response) {
                          console.log('Good to see you, ' + response.name + '.');
                          }

                          );


                   } else {
                   console.log('User cancelled login or did not fully authorize.');
                   }
                 },
                 { scope: "email" }
                 );


    }                         

});

This works, I can login with my facebook app. But after the login I want the FB.event.subscribe to be triggered. But I do not have a clue how to implement this with backbone.js

FB.Event.subscribe('auth.login', function(response) {   
    Backbone.history.navigate("#locallist",true)
});

Answer 1

Not sure what you mean with "I want the FB.event.subscribe to be triggered". If you have the FB object on your window, you can just start binding events wherever.

I think your problem will be that you can't guarantee when or if the FB object is on the window, so something that I have in my applications is to create a global event and make my app listen to that event. Here's some pseudo-code in CoffeeScript:

class FacebookServiceProvider extends ServiceProvider
    constructor: ->
        super

    initialize: (options) -> 
        FB.init
            appId: appId,
            status: true,
            cookie: true,
            xfbml: true,
            oauth: true

        app.trigger 'facebook:initialized'
        window.facebookInitialized = true
        @


class FacebookView extends Backbone.View
    initialize: (options) ->
        if window.facebookInitialized
            onFacebookInitialized.call @
        app.on 'facebook:initialized', @onFacebookInitialized, @
        @

    onFacebookInitialized: => 
        FB.Event.subscribe 'auth.authResponseChange', (response) -> console.log response
        @

basically just using a global variable on the window to see whether the facebook service provider has been initialized and if so, depending on the state, my view will render or listen to FB events only when it can and no sooner.