Spine.js Preloader

index.coffee

require('lib/setup')
Spine     = require('spine')
$         = Spine.$
Stages    = require('controllers/main')
Stage     = require('models/stage')
Question  = require('models/question')
Profile   = require('models/profile')
Leader    = require('models/leader')

class App extends Spine.Controller
  @extend(Spine.Events)

  constructor: ->
    super
    # Initialize cache object
    App.cache = {} unless App.cache?

    # Set loading screen until app is loaded
    $('#app').append require('views/layouts/preloader')

    App.cache.loading_flag = {}

    # Bind refresh events so that we can check if we're done loading once each models load
    Question.bind 'refresh', @update_question_loading_flag
    Stage.bind 'refresh', @update_stage_loading_flag
    Profile.bind 'refresh', @update_profile_loading_flag
    Leader.bind 'refresh', @update_leader_loading_flag

    # Now let's fetch all the data
    Question.fetch()
    Stage.fetch()
    Profile.fetch()
    Leader.fetch()

  update_question_loading_flag: =>
    alert "update_question_loading_flag"
    App.cache.loading_flag.question = true
    @check_loading_completion()

  update_stage_loading_flag: =>
    alert "update_stage_loading_flag"
    App.cache.loading_flag.stage = true
    @check_loading_completion()

  update_profile_loading_flag: =>
    alert "update_profile_loading_flag"
    App.cache.loading_flag.profile = true
    @check_loading_completion()

  update_leader_loading_flag: =>
    alert "update_leader_loading_flag"
    App.cache.loading_flag.leader = true
    @check_loading_completion()

  check_loading_completion: =>
    alert "CHECKING"
    if App.cache.loading_flag.question? and App.cache.loading_flag.stage? and App.cache.loading_flag.profile? and App.cache.loading_flag.leader?
      alert "LOADING COMPLETE"
      # Let's unbind these initial triggers
      Question.unbind 'refresh', @update_question_loading_flag
      Stage.unbind 'refresh', @update_stage_loading_flag
      Profile.unbind 'refresh', @update_profile_loading_flag
      Leader.unbind 'refresh', @update_leader_loading_flag

      # Initialize controllers:
      @html(@root = new Stages)

      # Trigger refresh events so the pages render
      Question.trigger 'refresh', Question.all()
      Stage.trigger 'refresh', Stage.all()
      Profile.trigger 'refresh', Profile.all()
      Leader.trigger 'refresh', Leader.all()

      Spine.Route.setup()

      # Trigger the window resize event for the stage nav script.js
      $(window).trigger('resize')

      $('#logo_link').bind 'click', @logo
      
      @loadNext()

  loadNext: ->
    # Navigate to the user's first page
    questions = Question.findAllByAttribute('completed', true)
    # If any questions have been completed, attempt to load question from last stage
    if questions.length
      # Get last active stage
      stages = Stage.findAllByAttribute('is_active', true)
      last_stage = stages[stages.length - 1]
      # If stage has incomplete questions, load first incomplete question
      questions = last_stage.questions().all()
      stageComplete = true
      for question in questions
        if not question.completed
          stageComplete = false
          question.click()
        if not stageComplete
          break
      # Else if any incomplete questions, load first incomplete question
      if stageComplete
        questions = Question.findAllByAttribute('completed', false)
        if questions.length
          questions[0].click()
        else
          # Else load personal progress page
          @navigate '/profile'
      # Else load the first question in the app
    else
      Question.first().click()

  logo: (e) =>
    e.preventDefault()
    @loadNext()

module.exports = App

index.html

    <script src="{{ STATIC_URL }}app/application.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript" charset="utf-8">
        window.STATIC_URL = "{{ STATIC_URL }}";
        window.MEDIA_URL = "{{ MEDIA_URL }}";
        window.csrf_token = "{{ csrf_token }}";
        window.userid = {{ user.id }};
        var jQuery  = require("jqueryify");
        var exports = this;
        jQuery(function(){
            var App = require("index");
            exports.app = new App({el: $("#app")});
        });

setup.coffee

require('json2ify')
require('es5-shimify')
require('jqueryify')

require('spine')
require('spine/lib/local')
require('spine/lib/ajax')
require('spine/lib/manager')
require('spine/lib/route')
require('spine/lib/relation')