JSFiddle - React, Tailwind, and code Playground

by Rey Bango

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-rc.3.min.js"></script>
  <script type="text/x-handlebars" data-template-name="index">
    <h2>{{headerName}}</h2>
    <ul>
    {{#each item in model}}
        {{#if isTitle}}
            <li>{{item.title}} - {{item.postedAgo}} by {{item.postedBy}}</li>
        {{/if}}
    {{/each}}
     </ul>
     <p>Version: {{version}}</p>
  </script>

JavaScript

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

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return App.Item.all();
  }
});	

App.Item = Ember.Object.extend();

App.Item.reopenClass({
	all: function() {
		var items = [];
		var myItems =  [{
				            "title": "Tearable Cloth Simulation in JavaScript",
				            "url": "http://codepen.io/stuffit/pen/KrAwx",
				            "id": 5592679,
				            "commentCount": 20,
				            "points": 127,
				            "postedAgo": "1 hour ago",
				            "postedBy": "NathanKP"
				        }, {
				            "title": "Netflix now bigger than HBO",
				            "url": "http://qz.com/77067/netflix-now-bigger-than-hbo/",
				            "id": 5592403,
				            "commentCount": 68,
				            "points": 96,
				            "postedAgo": "2 hours ago",
				            "postedBy": "edouard1234567"
				}];

		myItems.forEach( function (item) {
			items.push( App.Item.create(item) );
		});

		return items;

	}
});

App.IndexController = Ember.ObjectController.extend({
  headerName: 'Welcome to the Hacker News App',
  version:  2.1,
  isTitle: function() {
  	var foo;
  	foo = this.get( 'title' );
  	return (foo === "Tearable Cloth Simulation in JavaScript");
  }.property('[email protected]')
});