JSFiddle - React, Tailwind, and code Playground

by Kiwiupover

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.2/handlebars.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-pre.4/ember.js"></script>
<script src="http://previewmyvideo.com/ember-data.js"></script>
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<body>

    <script type="text/x-handlebars" data-template-name="application">
	application stuff like nav goes here
	<br>
	{{outlet}}
    </script>

    <script type="text/x-handlebars" data-template-name="posts">
	<br>
	'posts'
	<br>
	{{outlet}}
    </script>

    <script type="text/x-handlebars" data-template-name="posts/index">
	<br>
	'posts/index'
	<br>
	{{#each post in controller}}
	    name: {{post.name}}
	    <br>date: {{post.date}}
	    <br>Comments:<ul>
	    {{#each comment in post.comments}}
		<li>{{comment.author}}: {{comment.comment.comment}}</li>
	    {{/each}}
	    </ul>
	    <br>{{#linkTo post post}}view{{/linkTo}}
	    <br><br>
	{{/each}}
	<br><br>{{#linkTo posts.new}}Create New Post{{/linkTo}}
    </script>

    <script type="text/x-handlebars" data-template-name="posts/new">
	<br>
	'posts/new'
	<br>
    </script>

    <script type="text/x-handlebars" data-template-name="post">
	<h3>I am a post</h3>

	{{#with controller}}
	    id: {{id}}
	    <br>title: {{name}}
	    <br>date: {{date}}
	    <br>Comments:<ul>
	    {{#each comment in comments}}
		<li>{{comment.author}}: {{comment.comment.comment}}</li>
	    {{/each}}
	    </ul>
	    <br>{{#linkTo post.edit}}edit{{/linkTo}}
	    <br>{{#linkTo post.comments}}comments{{/linkTo}}
	{{/with}}

	<br><br>{{outlet}}
    </script>

    <script type="text/x-handlebars" data-template-name="post/edit">
	<br>
	'post/edit'
	<br>
    </script>

    <script type="text/x-handlebars" data-template-name="post/comments">
	<br>
	'post/comments'
    </script>

</body>
</html>

JavaScript

window.App = Ember.Application.create({
    LOG_TRANSITIONS: true
});

App.Router.map(function() {
    this.resource('posts', { path: '/posts' }, function() {
	this.resource('post', { path: '/:post_id' }, function() {
	    this.route('edit', { path: '/edit' });
	    this.route('comments', { path: '/comments' });
	});

	this.route( 'new', { path: '/new' });
    });
});

App.IndexRoute = Ember.Route.extend({
    setupController: function(controller){
	this.transitionTo('posts');
    }
});

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

App.PostRoute = Ember.Route.extend({
    model: function(params) {
	return App.Posts.find(params.post_id);
    }
});




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

App.Posts = DS.Model.extend({
    name: DS.attr('string'),
    date: DS.attr('string'),
    comments: DS.hasMany('App.Comment')
});

App.Comment = DS.Model.extend({
    author:	DS.attr('string'),
    comment:	DS.attr('string'),
    post:	DS.belongsTo('App.Posts')
});

App.Posts.FIXTURES = [{
    id:		1,
    name:	'My first post',
    date:	'12/23/09',
    comments:	[1,2]
},{
    id:		2,
    name:	'Another awesome post',
    date:	'3/23/12',
    comments:	[3]
}];

App.Comment.FIXTURES = [{
    id:	1,
    author: 'Joe',
    comment: 'awesome comment',
    posts_id: 1
},{
    id:	2,
    author: 'Mary',
    comment: 'another awesome comment',
    posts_id: 1
},{
    id:	3,
    author: 'Randy',
    comment: 'left another one',
    posts_id: 2
}];