Ember.js v0.9.7

by rlivsey

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.7.js"></script>
<script src="http://ghempton.github.com/ember-layout-example/js/libs/ember-routemanager.js"></script>
<script type="text/x-handlebars" >
</script>

JavaScript

Sylvius = Ember.Application.create({});

Sylvius.LaunchView = Em.View.extend({
      template: Em.Handlebars.compile("<h1>Launch View</h1><p>State: {{Sylvius.stateManager.currentState.path}}</p>")
});

Sylvius.DesktopView = Em.View.extend({
      template: Em.Handlebars.compile("<h1>Desktop View</h1><p>State: {{Sylvius.stateManager.currentState.path}}</p>")
});

Sylvius.stateManager = Ember.RouteManager.create({

  initialState: 'launch',
  enableLogging: true,
  wantsHistory: false,

  launch: Em.ViewState.create({
    view: Sylvius.LaunchView,
  }),
  desktop: Em.ViewState.create({
    view: Sylvius.DesktopView,
    route: 'desktop',
    
    home: Em.State.create({
      // I'm empty so /desktop/ gets to me
    }),
      
    sectionSelected: Em.State.create({
      route: ':sectionSlug',
      
      enter: function(manager, transition) {
        this._super.apply(manager, transition); // Make sure we load the views
        console.log('We found the slug: ' + Sylvius.stateManager.getPath('params.sectionSlug'));
        var sectionSlug = Sylvius.stateManager.getPath('params.sectionSlug');
        var section = Sylvius.sectionController.get('content').filterProperty('slug', sectionSlug).get('firstObject');
        var firstSection = Sylvius.SectionController.content.get('firstObject');
        Sylvius.SectionController.changeSelection(firstSection); // Set up selectedSection
      }
    })

  })
});

Sylvius.stateManager.start();

setTimeout(function() {Sylvius.stateManager.set('location', 'desktop');},2500);