JSFiddle - React, Tailwind, and code Playground

by rlivsey

HTML

<head>

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://dl.dropbox.com/s/qsewjprh6r4cphc/ember-541d085.js?dl=1"></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">
            {{#each post in controller}}
                <h1><a {{action showPost context="post" href=true}}>{{post.title}}</a></h1>
                <div>{{post.intro}}</div>
            {{/each}}
            <hr/>
            {{outlet}}
        </script>
        <script type="text/x-handlebars" data-template-name="post">
            <h1>{{title}}</h1>
            <div class="body">
              {{body}}
            </div>
            {{outlet}}
        </script>
  </head>

JavaScript

// assertion failed: Could not find state for path

var App = Em.Application.create();


// Testing the template,controller,view stuff
App.Post = Em.Object.extend({
  title: 'title',
  intro: 'intro',
  body: function(){
    return 'body'+parseFloat(this.get('id'));
  }.property('id')
});

App.Post.find = function(id){
  if (id) {
    return App.Post.create({id:id});
  }
  return [App.Post.create({id:1}), App.Post.create({id:2}), App.Post.create({id:3})];
};

App.ApplicationController = Em.ObjectController.extend({});
App.ApplicationView = Em.View.extend({templateName:'application'});

App.PostsController = Em.ArrayController.extend({});
App.PostsView = Em.View.extend({templateName:'posts'});

App.PostController = Em.ObjectController.extend({});
App.PostView = Em.View.extend({templateName: 'post'});

App.Router = Ember.Router.extend({
  // location: 'history', // Doesn't work for file: URLs
  root: Ember.Route.extend({
    index: Ember.Route.extend({
      route: '/',
      redirectsTo: 'posts'
    }),
    posts: Ember.Route.extend({
      route: '/posts',
      showPost: Ember.State.transitionTo('posts.post'),
      connectOutlets: function(router) {
        router.get('applicationController').connectOutlet('posts', App.Post.find());
      },
      post: Ember.Route.extend({
        route: '/posts/:post_id',
        connectOutlets: function(router, post) {
          router.get('postsController').connectOutlet('post', post);
        }
      })
    })
  })
});

App.ready = function main() {
    console.log('main called');
    App.initialize();
};