Backbone context manager

I'm trying to build a large scale backbone application. This requires the layout to have different contexts. I was looking at Backbone.layout_manager, but somehow couldn't grasp the magic that is performed there and if it was what I needed.

What I needed

I needed a simple switch state that my routers could use to have the correct view elements visible for the required scope.

See it like having 2 routers that require a 2 column markup, and one router requiring a one-column markup.

Since I'm building the site using Rails and therefor use the asset pipeline with coffeescript, this is the class I ended up with:

 

The code is best viewed with some example layout and context:

What happens is that the switching to the context removes classes on certain elements and add others. These classes should in your CSS show or hide the components. The reason everything is done with classes is simple. Transition effects.

.left-side-panel, .right-side-panel {
  -webkit-transition: all 200ms ease;
  opacity: 0;
  margin-top: 100px;
  &.active {
     margin-top: 0;
     opacity: 1;
  }
}        

you'll get the idea. This way you can really morph your one column layout to multiple columns etc.

Enjoy!

Posted via email from posterous of Matthijs Groen