JSFiddle - React, Tailwind, and code Playground

by Aaron Kahlhamer

HTML

<script src="https://c9.io/aaronkahlhamer/ember/workspace/js/libs/ember-1.0.0-rc.6.js"></script>
<script src="https://c9.io/aaronkahlhamer/ember/workspace/js/libs/ember-data.js"></script>
<script src="https://c9.io/aaronkahlhamer/ember/workspace/js/libs/handlebars.js"></script>
	<script type="text/x-handlebars">

        {{#linkTo 'posts'}}Posts{{/linkTo}}<br/>
        {{#linkTo 'about'}}About{{/linkTo}}<br/><br/>

    	{{outlet}}

	</script>

	<script type="text/x-handlebars" id="posts">
					
					{{#each model}}

        {{#linkTo 'post' this}} by {{#each user}}{{first_name}} {{last_name}}{{/each}}{{/linkTo}}<br/>

					{{/each}}

					{{outlet}}

	</script>

	<script type="text/x-handlebars" id="post">
			{{#each user}}
				{{first_name}} {{last_name}}
			{{/each}}
			
			{{#each user}}

				{{tag_list}}
				
				{{twitter_name}}

				{{first_name}} {{last_name}}
				
				{{description}}
				
				{{profile_image_url_small}}
				
				{{#each pages}}
					{{link_type}}
				{{/each}}

			{{/each}}

		

			{{extended}}

	</script>

	<script type="text/x-handlebars" id="about">
		Yo, this is the about page!
	</script>

JavaScript

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

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

App.Router.map(function() {
  this.resource('posts', function() {
    this.resource('post', { path: ':post_id' });
  });
  this.resource('about');
});

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

App.Post = DS.Model.extend({
    user:                     DS.attr('string'),
    tag_list:                 DS.attr('string'),
    twitter_name:             DS.attr('string'),
    first_name:               DS.attr('string'),
    last_name:                DS.attr('string'),
    description:              DS.attr('string'),
    pages:                    DS.attr('string'),
    link_type:                DS.attr('string'),
    profile_image_url_small:  DS.attr('string'),
});


App.Post.FIXTURES = [
  { 
    "user": [
                {"tag_list": ["ui designer","graphic design","frontend developer"],},
                {"twitter_name": "networkaaron",},
                {"id2": "50",},
                {"last_name": "Kahlhamer",},
                {"description": "Aaron has a strong graphic design background, enjoys working with semantic markup, and adding interactivity with jQuery.",},
                {"pages": [{"link_type": "profile",},{"link_type": "profile",}],},
                {"profile_image_url_small": "thumbnail.png",},
                {"first_name": "Aaron",}
            ],
        
    "id": "492",
  },
  { 
    "user": [
                {"tag_list": ["information technology"],},
                {"twitter_name": "",},
                {"id2": "60",},
                {"last_name": "Pizone",},
                {"description": "Information Systems Manager in Madison, WI.",},
                {"pages": [{"link_type": "profile2",},{"link_type": "profile2",}],},
                {"profile_image_url_small": "thumbnail.png",},
                {"first_name": "Jack",}
            ],
        
    "id": "278",
  }
  ];