Users with Ember JS

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/handlebars-1.0.0-rc.3.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-latest.min.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-data-latest.min.js"></script>
<script type="text/x-handlebars">    
    <h2>Users' example</h2>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="users">
    <h3>Users</h3>
    <ul>
        {{#each controller}}
        <li>{{#linkTo 'user' this}}{{name}}{{/linkTo}}</li>
        {{/each}}
    </ul>
</script>
<script type="text/x-handlebars" data-template-name="user">
    <h3>User</h3>
    <p>name: {{name}}</p>
    <p>email: {{email}}</p>
    {{#linkTo 'users'}}back{{/linkTo}}
</script>

SCSS

li {
    list-style: none;
}

JavaScript

App = Ember.Application.create();

App.Store = DS.Store.extend({
    revision: 12,
    adapter: 'DS.FixtureAdapter'
});

App.User = DS.Model.extend({
    name: DS.attr('string'),
    email: DS.attr('string')
});

App.User.FIXTURES = [
    { id: 1, name: 'user1', email: '[email protected]' },
    { id: 2, name: 'user2', email: '[email protected]' },
    { id: 3, name: 'user3', email: '[email protected]' },
    { id: 4, name: 'user4', email: '[email protected]' },
    { id: 5, name: 'user5', email: '[email protected]' }
];

App.Router.map(function() {
    this.resource('users');
    this.resource('user', { path: 'users/:user_id'});
});

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

App.UsersRoute = Ember.Route.extend({
    model: function() {
        return App.User.find();
    }
});

App.UsersController = Ember.ArrayController.extend();