Question

I am using Coffeescript and am loading the Facebook JS api asynchronously, as they suggest in their documentation. Like so:

#Load the FB api asynchronously
(->
  e = document.createElement("script")
  e.async = true
  e.src = document.location.protocol + "//connect.facebook.net/en_US/all.js"
  document.getElementById("fb-root").appendChild e
)()

doSomething = () ->
  # I'd like to call this from the FB context 

window.fbAsyncInit = ->
  FB.init 
    appId: fb_app_id
    status: true
    cookie: true
    xfbml: true
    oauth: true

  # Doesn't work. Is out of scope. 
  doSomething() 

With the Facebook stuff attached to window, I can’t access the stuff in the Coffeescript’s anonymous wrapper function context.

I know I could define my function as window.doSomething(), but am not sure if this is the best way.

Is there a way to have the Facebook stuff load within the context of the Coffeescript’s anonymous wrapper function?

Answer 1

You’re right in thinking that you shouldn’t pollute the global namespace. One way to continue having a clean environment (get it 🙂 is to use a class and keep your Facebook specific functions in there.

This might help get you started:

class MyFacebookApp 
  constructor: ->
  doSomething: () ->
    console.log "I'm doing something over here."

window.myFacebookApp = new MyFacebookApp()
window.fbAsyncInit = ->
  FB.init 
    appId: fb_app_id
    status: true
    cookie: true
    xfbml: true
    oauth: true

  myFacebookApp.doSomething()

Good luck!