Spine.js List

index.coffee

require('lib/setup')

Spine = require('spine')
Stages  = require('controllers/main')
Stage = require('models/stage')

class App extends Spine.Controller
  constructor: ->
    super
    @stage = new Stages
    @append @stage.active()

    Spine.Route.setup()

module.exports = App

item.eco

<div class="item">
    <%= @name %>
    <% for question in @questions().all(): %>
        <%= question.question %> ### EMPTY
    <% end %>
</div>

list.coffee

class StagesList extends Spine.Controller
  elements:
    '.stages': 'items'

  constructor: ->
    super
    @html require('views/stages/list')()

    @list = new List
      el: @items,
      template: require('views/stages/item')
      #selectFirst: true

    @list.bind 'change', @change

    @active (params) ->
      @list.change(Stage.find(params.id))

    Stage.bind('refresh change', @render)


  render: =>
    stages = Stage.all()
    for stage in stages
      console.log stage.questions().all() ### EMPTY
    @list.render(stages)

  change: (item) =>
    @navigate '/stages', item.id

module.exports = StagesList

main.coffee

Spine         = require('spine')
$             = Spine.$

Stage         = require('models/stage')
StagesStack   = require('controllers/stages/stack')
StagesList    = require('controllers/stages/list')

Question      = require('models/question')

class Stages extends Spine.Controller
  className: 'stages'

  constructor: ->
    super
    @list     = new StagesList
    @stack    = new StagesStack

    @routes
      '/stages/:id': (params) ->
        @stack.show.active(params)
      '/stages/:id/complete': (params) ->
        @stack.complete.active(params)
      '/questions/:id': (params) ->
        @stack.questions.active(params)

    @append @list, @stack

    Question.fetch()
    Stage.fetch()

module.exports = Stages

question.coffee

Spine = require('spine')

class Question extends Spine.Model
  @configure 'Question', 'id', 'question', 'stage', 'stage_order', 'level', 'question_type', 'clue', 'clue_link', 'is_daily_double', 'image', 'completed'

  @extend Spine.Model.Ajax

  @url: '/questions/'

  @belongsTo 'parent_stage', 'models/stage', 'stage'

module.exports = Question

stage.coffee

Spine = require('spine')

class Stage extends Spine.Model
  @configure 'Stage', 'id', 'name', 'description', 'slug', 'is_active', 'created_at'

  @extend Spine.Model.Ajax

  @url: '/stages/'

  @hasMany 'questions', 'models/question', 'stage'

module.exports = Stage