Separate routes for collections and items

by ekidd

HTML

<script src="https://s3.amazonaws.com/kiddsoftware-jsfiddle/handlebars-1.0.0-rc.3.js"></script>
<script src="https://s3.amazonaws.com/kiddsoftware-jsfiddle/ember-1.0.0-rc.2.js"></script>
<script src="https://s3.amazonaws.com/kiddsoftware-jsfiddle/ember-data-a29070da.js"></script>
<script type="text/x-handlebars">
    <h1>Separate routes for collections and items</h1>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="contacts">
    <ul>
       {{#each contact in controller}}
           <li>{{#linkTo 'contact' contact}}{{contact.name}}{{/linkTo}}</li>
       {{/each}}
    </ul>
</script>

<script type="text/x-handlebars" data-template-name="contact">
    <p>Name: {{name}}</p>
    <p>{{#linkTo 'contacts'}}All contacts{{/linkTo}}</p>
</script>

JavaScript

window.App = Ember.Application.create();

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

App.Contact = DS.Model.extend({
    name: DS.attr("string") 
});

App.Contact.FIXTURES = [{
    id: 1,
    name: "Jane Q. Public"
}, {
    id: 2,
    name: "John Q. Public"
}];
App.Router.map(function () {
    this.resource('contacts', { path: '/contacts' });
    this.resource('contact', { path: '/contact/:contact_id' });
});

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

App.ContactsRoute = Ember.Route.extend({
    model: function (params) {
        return App.Contact.find();  
    }
});

App.ContactRoute = Ember.Route.extend({
    model: function (params) {
        return App.Contact.find(params.contact_id);  
    }
});