JSFiddle - React, Tailwind, and code Playground

by pjmorse

HTML

<script src="https://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/emberjs/data/ember-data-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <header>
        <h1>CollectionView</h1>
    </header>
    {{#view Sylvius.CategoryList controllerBinding="Sylvius.vgCategoriesController" }}
        {{#each "controller"}}
           {{title}}        
        {{/each}}
    {{/view}}
    <footer></footer>
</script>

CSS

header h1 {
    width: 100%; height: 40px; line-height: 40px; text-align: center;
}
header nav {
    width: 100%; text-align: center; 
}
header nav a {
    color: #008Bff; cursor: pointer;
}
p {
    padding: 20px;
}

JavaScript

Sylvius = Ember.Application.create();

Sylvius.Section = DS.Model.extend({
  title: DS.attr('string')
});

Sylvius.Section.FIXTURES = [{
  "id": 1,
  "title": "Surface Anatomy"
}, {
  "id": 2,
  "title": "Sectional Anatomy"
}, {
  "id": 3,
  "title": "Pathways"
}, {
  "id": 4,
  "title": "Visual Glossary"
}];

Sylvius.store = DS.Store.create({
  revision: 4,
  adapter: DS.fixtureAdapter
});


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

Sylvius.vgCategoriesController = Em.ArrayController.extend({
    content: Sylvius.store.findAll(Sylvius.Section)
});
Sylvius.CategoryList = Em.ContainerView.extend({
    classNames: "vg-categories".w(),
    tagname: 'ul'
});