Router with dynamic routes

by pjmorse

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/data/ember-data-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <header>
        <h1>Ember Router Sample</h1>
    </header>
    {{outlet}}
    <footer></footer>
</script>

<script type="text/x-handlebars" data-template-name="home">
    <p>Hello World !</p>
    {{#each section in controller}}
        <a {{action goToSection context="section"}}>{{section.title}}</a>
    {{/each}}
</script>

<script type="text/x-handlebars" data-template-name="title">
    <p>The current section is: {{title}}</p>
</script>

CSS

header h1 {
    width: 100%; height: 40px; line-height: 40px; text-align: center;
}
header nav {
    width: 100%; text-align: center; 
}
a {
    color: #008Bff; cursor: pointer; text-decoration: underline;
}
p {
    padding: 20px;
}

JavaScript

Sylvius = Ember.Application.create();

Sylvius.Section = DS.Model.extend({
    title: DS.attr('string')
});

Sylvius.Section.FIXTURES = [{
    "id": 1,
    "title": "Surface Anatomy"},
{
    "id": 2,
    "title": "Sectional Anatomy"},
{
    "id": 3,
    "title": "Pathways"},
{
    "id": 4,
    "title": "Visual Glossary"}];

Sylvius.store = DS.Store.create({
    revision: 4,
    adapter: DS.fixtureAdapter
});


Sylvius.ApplicationController = Em.Controller.extend();
Sylvius.ApplicationView = Em.View.extend({
    templateName: 'application'
});

// For the "atlas launcher" box on the home page and the panel
Sylvius.HomeController = Em.ArrayController.extend({
    content: Sylvius.store.findAll(Sylvius.Section)
});

Sylvius.HomeView = Em.View.extend({
    templateName: 'home'
});

Sylvius.TitleController = Em.ObjectController.extend({
    selectedSection: null
});
Sylvius.TitleView = Em.View.extend({
    templateName: 'title'
});

Sylvius.Router = Em.Router.extend({
    enableLogging: true,
    location: 'hash',
    root: Em.Route.extend({

        goToSection: Em.Route.transitionTo('root.desktop.sectionState'),

        // STATES
        index: Em.Route.extend({
            route: '/',
            connectOutlets: function(router, context) {
                router.get('applicationController').connectOutlet({
                    name: 'home'
                });
            }
        }),
        desktop: Em.Route.extend({
            route: '/desktop',
            defaultState: Em.Route.extend({
                route: '/',
                connectOutlets: function(router, context) {
                    var titleController = router.get('titleController');
                    var homeController = router.get('homeController');
                    router.get('applicationController').connectOutlet({
                        name: 'title'
                    });
                    titleController.set('content', homeController.get('content').get('firstObject'));
             ...