Spine.js preloader logic

index.js.coffee

class App extends Spine.Controller

  @extend(Spine.Events)

  constructor: ->
    super

    # Initialize cache object
    App.cache = {} unless App.cache?

    # Let's set a loading message on screen
    $('#app').append JST['app/views/layouts/preloader']
    opts =
      lines: 12
      length: 7
      width: 4
      radius: 10
      color: '#000'
      speed: 1
      trail: 68
      shadow: false
      hwaccel: false
    $('#preloader_spinner').spin(opts)

    App.cache.loading_flag = {}

    # Bind refresh events so that we can check if we're done loading once each model loads
    App.Feed.bind 'refresh', @update_feed_loading_flag
    App.Publisher.bind 'refresh', @update_publisher_loading_flag

    # Now let's fetch all the data
    App.Feed.fetch()
    App.Publisher.fetch()

  update_feed_loading_flag: =>
    App.cache.loading_flag.feed = true
    @check_loading_completion()

  update_publisher_loading_flag: =>
    App.cache.loading_flag.publisher = true
    @check_loading_completion()

  check_loading_completion: =>
    if App.cache.loading_flag.feed and App.cache.loading_flag.publisher?
      # Let's unbind these initial triggers
      App.Feed.unbind 'refresh', @update_feed_loading_flag
      App.Publisher.unbind 'refresh', @update_feed_loading_flag
      # Initialize controllers:
      @html(@root = new App.Root)

      Spine.Route.setup()

      # Let's trigger refresh events so the pages render
      App.Feed.trigger 'refresh', App.Feed.all()

window.App = App