Examples of SpineJS

content.js.coffee

class MainStack extends Spine.Stack

  controllers: 
    dashboard:       App.Dashboard
    calendar:        App.Calendar
    customers:       App.Customers
    cars:            App.Cars
    stocks:          App.Stocks
    requests:        App.Requests
    statistic:       App.Statistic
    overall_seacher: App.OverallSearcher

  default: 'dashboard'

  routes:
    '/stocks': 'stocks'


class App.Content extends Spine.Controller
  @extend Spine.Events

  constructor: ->
    super
    @main = new MainStack
    @append @main

    Spine.Route.add /\/dashboard(|\/\w*)/,        => @main.dashboard.active()
    Spine.Route.add /\/calendar/,                 => @main.calendar.active()
    Spine.Route.add /\/customers/,                => @main.customers.active()
    # Spine.Route.add /\/cars/,                     => @main.cars.active()
    Spine.Route.add /\/services/,                 => @main.cars.active()
    Spine.Route.add /\/requests/,                 => @main.requests.active()
    Spine.Route.add /\/statistic/,                => @main.statistic.active()

    @main.overall_seacher.bind 'searchingInOverallSearcher', (query) => @trigger('searchingInOverallSearcher', query)

  searchInOverallSearchForm: (query) =>
    @main.overall_seacher.active() unless @main.overall_seacher.isActive()
    @main.overall_seacher.refresh query

  hideOverallSearchForm: =>
    @main.overall_seacher.toPreviousPage()

  moveCursorToFirstResult: => 
    @main.overall_seacher.afterSaveCursorMustBeMoved()

index.js.coffee

#= require json2
#= require jquery
#= require spine-1.3/src/spine
#= require spine-1.3/src/local
#= require spine-1.3/src/manager
#= require spine-1.3/src/ajax
#= require spine-1.3/src/route
#= require spine-1.3/src/relation


#= require_tree ./lib
#= require_self
#= require_tree ./models
#= require_tree ./controllers
#= require_tree ./views


class App extends Spine.Controller
  constructor: ->
    super
    window.start_at  = "1:00"
    window.finish_at = "23:00"

    App.sync_ip_address = @sync_ip_address
    App.User.bind 'refresh', @setupApplication #load appliaction only after getting data from ajax
    App.User.fetch()

  setupApplication: =>
    App.User.unbind 'refresh' # setupApplication method should be call only once
    new App.RealtimeSync 
    new App.Notifications
    new App.EventActionManager el: @el
    @content = new App.Content el: @el.find("#page-wrapper")
    @menu    = new App.Menu    el: @el 
    @seacher = new App.SearchField el: @el.find("form#globalSearch")
    
    App.SearchField.bind 'clearInput', @seacher.clearInput
    @seacher.bind 'blankQuery',   @content.hideOverallSearchForm
    @seacher.bind 'tryingSearch', @content.searchInOverallSearchForm
    @seacher.bind 'pressEnter',   @content.moveCursorToFirstResult
    @content.bind 'searchingInOverallSearcher', @seacher.refreshSearchField
    Spine.Route.setup()


window.currentLang = 'ru'
window.App = App

menu.js.coffee

class TopBar extends Spine.Controller
  constructor: ->
    super
    App.Task.bind 'refresh change', @renderTasks
    App.Event.bind 'refresh change', @renderEvents
    @renderTasks()
    @renderEvents()

  renderTasks: =>
    tasks = App.User.currentUser().tasks().all()
    tasks = _.where(tasks, {status: 'pending'})
    @el.find("li#taskScroll").html @view('shared/tasks')(tasks: tasks)
    @el.find("#tasks span.number").html(tasks.length)
  
  renderEvents: =>
    events = App.Event.getEventsForToday(user_id: App.User.currentUser().id, statuses: ['pending'])
    @el.find("li#eventsScroll").html @view('shared/events')(events: events)
    @el.find("#events span.number").html(events.length)

class SideBar extends Spine.Controller
  constructor: ->
    super

class App.Menu extends Spine.Controller
  constructor: ->
    super
    new SideBar el: @el.find("nav.navbar-side")
    new TopBar el: @el.find("nav.navbar-top")

notifications.js.coffee

class Notice extends Spine.Controller
  constructor: ->
    super
    @setupMessenger()
    @display()
    @notice.bind 'destroy', @remove

  remove: =>
    @release()
    @message.hide()
    if @notice
      @notice.unbind 'destroy', @remove

  destroyNotice: =>
    @notice.destroy()

  setupMessenger: ->
    Messenger.options = {
        extraClasses: 'messenger-fixed messenger-on-bottom messenger-on-right',
        theme: 'flat'
    }


  display: ->
    @message = Messenger().post(
      message: @notice.title
      id: "notice_#{@notice.id}"
      type: 'info'
      showCloseButton: true
      hideAfter: false
      events: { "click .messenger-close": @destroyNotice }
      actions: {
        details:{
          label: I18n.t('views.customers.customer_card'),
          action: =>
            @message.update({ 
                            message: I18n.t('views.notifications.notice_looked')
                            type: 'success'
                            actions: false
                            hideAfter: 3
                            })
            @navigate @notice.link_to_object
            @destroyNotice()
        }
      }
    )

class App.Notifications extends Spine.Module
  constructor: ->
    @renderCurrentNotice()
    App.Notice.bind 'create', @renderNewNotice

  renderCurrentNotice: ->
    for notice in App.User.currentUser().notices().all()
      do (notice) =>
        new Notice notice: notice

  renderNewNotice: (notice, options) =>
    return unless notice.user.current_user
    new Notice notice: notice

realtime_sync.js.coffee

class App.RealtimeSync extends Spine.Module
  constructor: ->
    @socket = io.connect(App.sync_ip_address);
    @socket.on 'rt-change', @processWithoutAjas

  processWithoutAjas: (message) =>
    Spine.Ajax.disable =>
      @process(message)

  process: (message) ->
      klass = App[message.resource]
      console.log message
      switch message.action
        when 'create'
          console.log 'create'
          return if  klass.exists(message.obj.id)
          klass.create message.obj 
        when 'update'
          console.log 'update'
          klass.update message.id, message.obj
        when 'destroy'
          console.log 'destroy'
          obj = klass.find message.id
          obj.destroy() if obj
        else
          throw 'Unknown type: ' + message.type