JSFiddle - React, Tailwind, and code Playground

by bug0r

HTML

<script src="https://raw.github.com/wycats/handlebars.js/1.0.0-rc.3/dist/handlebars.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-latest.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-data-latest.js"></script>
<div id="appRoot">
<h1>Test Application (<a href="http://bug0r.apiary.io/api/semantics">link to API</a>) </h1> 

<script type="text/x-handlebars">
    {{#linkTo "semantic"}}Home{{/linkTo}}
    {{#linkTo "about"}}About{{/linkTo}}

    {{outlet}}
</script>

<script type="text/x-handlebars" id="semantic">
    <h1>Index</h1>
        {{#each model}}
        <div class="item">Hello,
            {{key}} --- {{name}}
            </div>
        {{/each}}       
</script>

<script type="text/x-handlebars" id="about">
    <h1>About</h1>
    <p>Sometext about here </p>
</script>
   
</div>

CSS

h1 a {
    font-size: 0.7em;
}
a.ember-view{ 
    padding: 4px;
}
a.ember-view.active{
    background-color: #f0f0f0;
}

JavaScript

var App = window.App = Ember.Application.create({
    VERSION: '1.0',
    rootElement: '#appRoot',
    LOG_TRANSITIONS: true
});
App.deferReadiness(); // do not initialize it until we are ready


App.Adapter = DS.RESTAdapter.extend({
    namespace: 'api',
    url: 'http://bug0r.apiary.io'
});
App.Adapter.map('Semantic', {
    primaryKey: 'key'
});
App.Store = DS.Store.extend({
    revision: 12,
    adapter: App.Adapter
});

App.Router.map(function () {
    // each call will create Ember.Route instance for customizing route
    this.resource("semantic", {
        path: "/"
    });
    this.route("about", {
        path: "/about"
    });
});

/* Symantic model*/
App.Semantic = DS.Model.extend({
    key: DS.attr('string'),
    name: DS.attr('string'),
});

App.SemanticRoute = Ember.Route.extend({
    model: function () {
        return App.Semantic.find();
        //return [{key:111,name:"aaaa"},{key:222,name:"qqqqq"},{key:3333,name:"bbbb"},{key:555,name:"ccc"}];
    }
});


App.advanceReadiness(); // ready for initialization