JSFiddle - React, Tailwind, and code Playground

by cherif_b

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script src="http://cloud.github.com/downloads/pangratz/data/ember-data.js"></script>
<script type="text/x-handlebars" data-template-name="application" >
    <h1>My Application</h1>
    {{outlet}}
</script>    
    
<script type="text/x-handlebars" data-template-name="posts" >
    <h2>The posts:</h2>
    {{#each post in controller}}                   
        <h3><a {{action showPost context="post" href=true}}>{{post.title}}</a></h3>
        <div>{{post.intro}}</div>
    {{/each}}
</script> 
  
<script type="text/x-handlebars" data-template-name="post" >
    <h1>{{title}}</h1>
    <div class="body">
      {{body}}
    </div>
</script>

JavaScript

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

///CONTROLLERS

App.ApplicationController = Ember.Controller.extend();

App.PostsController = Ember.ArrayController.extend({
});

App.PostController = Ember.ObjectController.extend({
});


///VIEWS

App.ApplicationView = Ember.View.extend({
    templateName: 'application'
});

App.PostsView = Ember.View.extend({
    templateName: 'posts'
});

App.PostView = Ember.View.extend({
    templateName: 'post'
});


/// MODELS

App.Post = DS.Model.extend({
    title: DS.attr('string'),
    intro: DS.attr('string')
});

App.store = DS.Store.create({
    revision: 4
});

App.store.load(App.Post, {id: 1, title: 'first post', intro: 'first intro'});
App.store.load(App.Post, {id: 2, title: 'second post', intro: 'second intro'});

///ROUTER

App.Router = Ember.Router.extend({
  location: 'hash',
  enableLogging: true,    
    
  root: Ember.Route.extend({
    index: Ember.Route.extend({
      route: '/',
      redirectsTo: 'posts'
    }),
    posts: Ember.Route.extend({
      route: '/posts',
      showPost: Ember.State.transitionTo('post'),
      
        
      index: Ember.Route.extend({
          route: '/',
          connectOutlets: function(router) {
        router.get('applicationController').connectOutlet("posts", App.Post.find());
      },
      }),
        
      post: Ember.Route.extend({
          route: '/:post_id',
          connectOutlets: function(router, post) {
            router.get('applicationController').connectOutlet("post", post);
          }
        })
    })
  })
});

App.initialize();