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">
    <h2>Nesting Example</h2>
    {{outlet}}
</script>
    
<script type="text/x-handlebars" data-template-name="groups">
    
    <div>
        <h3>Groups</h3> <p>Click on a group to display corresponding users</p>
        <div style="">
            <ul>
            {{#each controller}}
                <li>{{#linkTo "users" users}}{{name}}{{/linkTo}}</li>
            {{/each}}
            </ul>
        </div>
    </div>
    <div>
        {{outlet}}
    </div>
</script>    

<script type="text/x-handlebars" data-template-name="users">

    <h3>Users</h3>
    <p>Click on an user to display the details</p>
    <div>
        <ul>
        {{#each user in model}}
            <li>{{#linkTo "details" user}}{{user.name}}{{/linkTo}}</li>
        {{/each}}
        </ul>
    </div>
    <div>
        {{outlet}}
    </div>
</script>

<script type="text/x-handlebars" data-template-name="details">
    <h3>Details for {{model.name}}:</h3> 
    <div>
        <i>{{model.details}}</i>
    </div>
</script>

CSS

body{
    font-family : Verdana;
    font-size: 11px;
}
p{
    color: #666;
    margin: 0 1em;
} 

div {
    border : 1px dotted #ccc;
    margin: 1em;
}

ul {
    font-size: 1.2em;
}

JavaScript

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

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

App.Router.map( function() {
    this.resource('groups', function() {
        this.resource('users', { path: "/:group_id" }, function(){
            this.resource('details', { path: "/:user_id" });
        });
    });
});

/**
 * ROUTES
 */
App.IndexRoute = Ember.Route.extend({
	redirect: function() {
		this.transitionTo('groups');
	}
});

App.GroupsRoute = Ember.Route.extend({
	model		:   function( ){
        //console.log("--->", App.Group.find());
		return App.Group.find();
	}
});

/*App.DetailsRoute = Ember.Route.extend({
    model : function(){
        return this.modelFor("details");
    }
});*/

/**
 * MODELS
 */
App.Group = DS.Model.extend({
	name: DS.attr('string'),
    details: DS.attr('string'),
	users: DS.hasMany('App.User')
});

App.User = DS.Model.extend({
    name: DS.attr('string'),
    details: DS.attr('string'),
    groups: DS.hasMany('App.Group')
});

/**
 * FIXTURES
 */

App.Group.FIXTURES = [{
    id:1,
    name:"Group one",
    details:"details for Group one",
    users:[1,2]
    
},{
    id:2,
    name:"Group two",
    details:"details for Group two",
    users:[2]
}];

App.User.FIXTURES = [{
    id:1,
    name:"Tom",
    details:"I am the Cat !",
    groups: [1]
    
},{
    id:2,
    name:"Jerry",
    details:"I am the Mouse !",
    groups:[2]
}];