1

I'm pretty new to spine and right now I'm trying to setup my first small app.

I've got a Posts Controller where defining 2 routes: One showing a specific post and one showing all posts

class Posts extends Spine.Controller
  className: 'posts'

  constructor: ->
    super

    @main = new Main

    @routes
      '/post/:id': (params) ->
    @main.show.active(params)
      '/posts': ->
    @main.show_all.active()

    @append @main

Working so far ... Then I've got a posts.main controller where i define my show and show_all controllers

Post = require('models/post')

class Show extends Spine.Controller
  className: 'show'

  constructor: ->
    super
    @active @load

  load: (params) =>
    @item = Post.find(params.id)
    @html require('views/post')(@item)

class Show_all extends Spine.Controller
  className: 'show_all'

  events:
    "click .items" : "click"

  constructor: ->
    super
    @active @load

  load: =>
    @item = Post.all()
    @html require('views/posts')(@item)

  change: (postId) =>
    @navigate("/post", postId)

  click: (event) ->
    @change(event.target.id)

class Main extends Spine.Stack
  className: 'main Stack'
  controllers:
    show: Show
    show_all : Show_all

module.exports = Main

Also working so far When I got to: http://localhost:9294/# I see a list of my posts. Now my target is: When clicking on a post I want to go to /#/post/[ID] This is also working BUT Instead of just seeing the information of the selected post I always get a list of all available posts under the post details. When I hit F5 the list of all posts is gone...

Why is this happening? What must I do to JUST see the post related information?

soupdiver
  • 3,504
  • 9
  • 40
  • 68

1 Answers1

2

So the problem you have is that not only the post details are displayed but the complete list of posts as well?

If so, did you add the necessary CSS?

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

A Spine stack manages multiple controllers and adds an 'active' class to the element of the controller which should be active.

So in your DOM you should be seeing the 2 controller elements both with a class of stack and only one with a class of active as well.

The CSS makes sure to hide all the inactive controllers.

SpoBo
  • 2,100
  • 2
  • 20
  • 28
  • I thought the manager also automatically hides the inactive elements... thanks very much :) – soupdiver Mar 10 '12 at 19:24
  • yes the manager does the same thing. stack is just something that extends on manager. but they all do it with the CSS display trick. Glad I could help :) – SpoBo Mar 12 '12 at 22:05
  • It is kinda weird... I added the css stuff you wrote and it works well. Then I removed it and it is still working as I expected it from the beginning. Strange.... – soupdiver Mar 14 '12 at 10:39
  • That is indeed pretty weird ;o I suggest checking the DOM to see if there are 2 elements for the 2 controllers and that one of them has the active class. Google Chrome & Firefox are both very good browsers to do this in. It's also possible that your browser is caching your CSS. Do a force reload to see if that changed it back to the way it worked before. – SpoBo Mar 14 '12 at 11:52
  • yeah i see the element for each controller and the one which should be active and visible also got the class active. But when I asked my question also the div which was NOT active was visible... but not yet anymore. +1 for computer logicalness :D – soupdiver Mar 14 '12 at 12:06
  • It'd be smart to figure out what exactly is tripping it up. you don't want your code to work because of reasons you don't understand. First rule of writing a maintainable codebase imo :p But that's your own choice to make. – SpoBo Mar 14 '12 at 12:08
  • yeah you're absolutely right but for now I think my problem has something like browser cache as a reason. Now it's working as I expected it from the beginning and I've got the same codebase as in the beginning so I hope the system works as I understand it :> – soupdiver Mar 14 '12 at 13:35