Ember-latest template with ember-data

Dynamic segment states

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/pjmorse/ember-skeleton/ember-data.min.js"></script>
<script type="text/x-handlebars" data-template-name="sections">
    <h1>Sections</h1>
    <ul>
      {{#each controller.content}}
        <li>Section: {{title}}</li>
      {{/each}}
    </ul>
</script>
<script type="text/x-handlebars" data-template-name="section">
    <h1>Section</h1>
    <h2>{{title}}</h2>
    <p>ID: {{id}}</p>
</script>
<script type="text/x-handlebars" data-template-name="application">
  <div class="content">
    {{outlet}}
  </div>
</script>

CSS

*    { font-family: helvetica; }
body { padding: 20px; }
h1 { font-weight: bold; font-size: 1.2em; }
h2 { font-weight: bold; font-size: 1.1em; font-style: italic; }

JavaScript

Sylvius = Ember.Application.create();

Sylvius.Section = DS.Model.extend({
  // e.g. Surface, Sectional, Pathways, Visual Glossary
  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.fixtureStore = DS.Store.create({
  revision: 4,
  adapter: DS.fixtureAdapter
});

Sylvius.SectionsController = Em.ArrayController.extend({
    content: Sylvius.fixtureStore.findAll(Sylvius.Section)
});
Sylvius.SectionsView = Em.View.extend({ templateName: 'sections' });

Sylvius.SectionController = Em.Controller.extend();
Sylvius.SectionView = Em.View.extend({ templateName: 'section' });
    
// Instantiated and wired up for you in App.initialize()
Sylvius.ApplicationController = Em.Controller.extend();
Sylvius.ApplicationView       = Em.View.extend({ templateName: 'application' });

Sylvius.Router = Em.Router.extend({
  enableLogging: true,
  location: 'hash',
  
  root: Em.State.extend({
    
    // STATES
    index: Em.State.extend({
      // Events
        
        goToSection: Ember.State.transitionTo('section'),
        
 
      route: '/',
      connectOutlets: function(router, context) {
        var appController = router.get('applicationController'),
            sectionsController = router.get('sectionsController');
        appController.connectOutlet(Sylvius.SectionsView);
      }
//    }),
//    section: Em.State.extend({
//        route: '/:section_id',
//        modelStyle: 'Sylvius.Section',
//        connectOutlets: function(router, section) {
//            var appController = router.get('applicationController'),
//                sectionController = router.get('sectionController');
//            sectionController.set('content', section);
//            appController.connectOutlet(Sylvius.SectionView);
//        }
    })          
  })
});

Sylvius.initialize();