CODEWITHSUNDEEP
spine.js
Miles
Miles

Reputation: 1635

SpineJS stack doesn't add active class to controllers

Spine = require('spine')
Welcome = require('controllers/welcome')
Signup = require('controllers/signup')

class Main extends Spine.Stack
  controllers:
    welcome: Welcome
    signup: Signup

  default: 'signup'

  routes:
    '/welcome': 'welcome'
    '/signup': 'signup'

module.exports = Main

The welcome and signup controllers just render a view so I can understand how the stack works:

Spine = require('spine')

class Welcome extends Spine.Controller
  className: 'welcome'

  constructor: ->
    super
    @active @render

  render: ->
    console.log 'welcome render function'
    @html require('views/welcome')()

module.exports = Welcome

and then per stack docs, I added this to my css:

.stack > *:not(.active) {
  display: none
}

I purposefully have the signup controller do @navigate('/welcome') instead of rendering its view to see how I would control the stack. The console.log statement in welcome's render function does get called, however welcome's <div> doesn't have the active class added to it, and because of the above CSS, isn't shown.

I've re-read the docs a few times, googled around, and am not sure what I'm missing. Why isn't the active class being added to the welcome el?

Upvotes: 0

Views: 90

Answers (1)

Jewel
Jewel

Reputation: 166

I suspect that the problem is that you're calling render as part of the active event, which is happening after the class is added. Since render calls @html, it would replace the HTML that had the class added.

As an aside, with spine I've found that reading the source code can help immensely. It's a tiny framework. See https://github.com/spine/spine/blob/dev/src/manager.coffee for the relevant code for stacks.

Upvotes: 1

Related Questions