JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script src="https://gist.github.com/raw/502dcdfdf3e08ae687a3/03d8ac8c4ec4d2830f8d7737d774bce44822358d/ember.min.js"></script>
<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="posts">
<div>Posts</div>
<ul>
{{#each post in controller}}
<li>{{#linkTo "commentsIndex" post }}{{post.title}}{{/linkTo}}</li>
{{/each}}
</ul>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="comments">
<div>Comments</div>
<ul>
{{#each comment in content}}
<li>{{#linkTo "showComment" comment}}{{comment.title}}{{/linkTo}}</li>
{{/each}}
</ul>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="showComment">
<h4>Comment</h4>
{{content.title}}
</script>
JavaScript
App = Ember.Application.create();
App.Router.map(function (match) {
match('/').to('index');
match('/posts').to('posts', function (match) {
match('/').to('postsIndex');
match('/:post_id').to('post', function (match) {
match('/comments').to('comments', function (match) {
match('/').to('commentsIndex');
match('/:comment_id').to('showComment');
});
});
});
});
App.IndexRoute = Ember.Route.extend({
redirect: function () {
this.transitionTo('postsIndex');
}
});
App.PostsRoute = Ember.Route.extend({
model: function () {
var posts = [Ember.Object.create({
title: "Post 1",
id: 1
}),
Ember.Object.create({
title: "Post 2",
id: 1
})];
return posts;
}
});
App.PostsIndexRoute = Ember.Route.extend({
model: function () {
var posts = [Ember.Object.create({
title: "Post 1",
id: 1
}),
Ember.Object.create({
title: "Post 2",
id: 1
})];
return posts;
}
});
App.PostRoute = Ember.Route.extend({
model: function (params) {
console.log('PostRoute ' + Em.inspect(params));
return Ember.Object.create({
title: "Post 1",
id: 1
});
}
});
App.CommentsRoute = Ember.Route.extend({
model: function (params) {
console.log('CommentsRoute ' + Em.inspect(params));
return [Ember.Object.create({
title: "Comment 1",
id: 1,
post_id: 1
})]
}
});
App.CommentsIndexRoute = Ember.Route.extend({
model: function (params) {
console.log('CommentsIndexRoute ' + Em.inspect(params));
return [Ember.Object.create({
title: "Comment 1",
id: 1,
post_id: 1
})]
}
});
App.ShowCommentRoute = Ember.Route.extend({
model: function (params) {
console.log('ShowCommentRoute ' + Em.inspect(params));
return Ember.Object.create({
title: "Comment 1",
id: 1,
post_id: 1
});
}
});