JSFiddle - React, Tailwind, and code Playground

by Sylvain MINA

HTML

<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script src="http://builds.emberjs.com/release/ember.js"></script>
<script type="text/x-handlebars">
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
  <h2>Index </h2>
  {{#link-to "posts"}}Go to posts{{/link-to}}
</script>

<script type="text/x-handlebars" data-template-name="posts">
  <h2>{{#link-to "posts"}}Posts{{/link-to}}</h2>
  {{#each post in model}}
    {{#link-to "post" post}}Go to {{post.title}}{{/link-to}}
  {{/each}}
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="post">
  <h2>Post {{id}} - {{title}}</h2>
</script>

CSS

ul { padding: 15px; font-size: 1.4em; color: green; }

JavaScript

App = Ember.Application.create({});
App.Router.reopen({
  doSomethingOnUrlChange: function() {
    console.log(this.get('url'));
  }.on('didTransition')  
});
App.Router.map(function(){
    this.resource('posts', function(){
        this.resource('post', {path: ':post_id'});
    });
});

App.Post = Ember.Object.extend({
    id: null,
    title: ''
})

App.PostsRoute = Ember.Route.extend({
    model: function () {
        return [App.Post.create({id:1, title: 'foo'}), App.Post.create({id:2, title: 'bar'})];
    }
});