Ember Nested Routes Example

by Unspecified

HTML

<script src="http://fiddle.nonolog.de/lib/handlebars.js"></script>
<script src="http://fiddle.nonolog.de/lib/ember.js"></script>
<script src="http://fiddle.nonolog.de/lib/ember-data.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    {{outlet}}
</script>
    
<script type="text/x-handlebars" data-template-name="home">
    <h2>The Home Page</h2>
    
</script>

JavaScript

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

App.Router.map( function() {
    this.route('home', {path: '/home'});
});

App.IndexRoute = Ember.Route.extend({
    redirect: function(){
    this.transitionTo('home');
    }
});

var songs = [
  Ember.Object.create({trackNumber: 4, title: 'Ob-La-Di, Ob-La-Da'}),
  Ember.Object.create({trackNumber: 2, title: 'Back in the U.S.S.R.'}),
  Ember.Object.create({trackNumber: 3, title: 'Glass Onion'})
];

App.HomeController = Ember.ArrayController.extend({
  content: songs,
  sortProperties: ['trackNumber'],
  sortAscending: true,
    filteredSongs: function(){
        return this.get('content');
    }.property('content.@each')
});