How to structure files

[martins]

Hi,

I got all of my Panels living in the same file: app/controllers/word_game.coffee

I´d like to put each Panel in it´s own file. So I refactored my main controller, word_game.coffee:

 

Spine   = require('spine')
{Panel} = require('spine.mobile')
 
Dictionary       = require('models/dictionary')
WordGameMemorize = require('controllers/word_game_memorize')
WordGameLookup   = require('controllers/word_game_lookup') 

 

class WordGame extends Spine.Controller
  constructor: ->
    super
    @memorize = new WordGameMemorize
    @lookup   = new WordGameLookup
 
    @routes
      '/memorize':                  -> @memorize.active(trans: 'right')
      '/lookup':                    -> @lookup.active(trans: 'left')
 
    Dictionary.fetch()
 
module.exports = WordGame

Memorize and Lookup both follow this pattern:

# controllers/word_game_memorize.coffee
Spine   = require('spine')
{Panel} = require('spine.mobile')
$       = Spine.$
Dictionary       = require('models/dictionary')

class WordGameMemorize extends Panel
  title: 'Memorize' 

 

  constructor: ->
    super
    Dictionary.bind('refresh change', @render)
    @addButton('Lookup', @goto_lookup)

Unfortunately, this does not work. Would anyone be so kind and explain how I structure my Panels in different files?

  Please advice me! :-)

Cheers,

Martin

[Marian Ignev]

I think you must export your objects in the end of the file.

For example:

# controllers/word_game_memorize.coffee
Spine   = require('spine')
{Panel} = require('spine.mobile')
$       = Spine.$
Dictionary       = require('models/dictionary')

class WordGameMemorize extends Panel
  title: 'Memorize' 

 

  constructor: ->
    super
    Dictionary.bind('refresh change', @render)
    @addButton('Lookup', @goto_lookup)

module.exports = WordGameMomorize 

I think this will work. Please try and after that tell us whats happend :)

I hope i helped :)

Поздрави,
Мариан Игнев

---
www: http://m.ignev.net/

twitter: @mignev

2012/3/25 martins <mar...@stabenfeldt.net>

[Martin Stabenfeldt]

Hi,

Thanks for the tips! I didn't work, though. :-(

Oh, and sorry, don't know it matters, but my project is a Spine Mobile project.

Having a second look at the docs, I still can't understand what´s wrong with my attempt.

class ContactsList extends Panel
  constructor: ->
    super
    Contact.bind('refresh change', @render)

  render: =>
    items = Contact.all()
    @html require('views/contacts/item')(items)

class App extends Stage.Global
  constructor: ->
    super

    # Instantiate panels
    @contacts = new ContactsList

    # Activate a panel
    @contacts.active()




-- 

Martin Stabenfeldt

tlf: +47 9344 1707

[Marian Ignev]

Hi,

use spine.mobile absolutely is not a problem.

Concerning a first problem can you give more info about the the problems, errors and so on.

And ... about the second problem and the code wich gave us :) You need a controller. So create a controller for example ... Contacts wich extends Spine.Controller and in his constructor initialize your ContactsList panel and activate him :)

I just created a simple example for you:

http://pastie.org/3677058

I hope i helped :)

Поздрави,
Мариан Игнев

---
www: http://m.ignev.net/

twitter: @mignev

2012/3/26 Martin Stabenfeldt <mar...@stabenfeldt.net>

[Martin Stabenfeldt]

Hi,

Thanks a lot for the example you made for me! Tried to follow it, but still no luck. :-(

Made a paste with my attempt here: http://pastie.org/3743525

Very grateful if you could have an other look! :-)

Cheers,

Martin Stabenfeldt

[Øyvind Nordhagen]

Why not just

module.exports = class WordGame extends Spine.Controller

?