JSFiddle - React, Tailwind, and code Playground

by rlivsey

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script src="https://github.com/downloads/emberjs/data/ember-data-latest.js"></script>
<script type="text/x-handlebars"> 
    <h2>Projects</h2>
    <p>Select a project to see the people in it</p>
    <ul>
    {{#each App.projects}}
        {{#view App.ProjectView contentBinding="this"}}
            {{content.name}}
        {{/view}}
    {{/each}}
    </ul>
    
    {{view App.ProjectPeopleView}}
</script>

<script type="text/x-handlebars" data-template-name="project-people">
    {{#if App.currentProject}}
    <h2>{{App.people.length}} people in {{App.currentProject.name}}</h2>
    <ul>
      {{#each App.people}}
        <li>{{name}}</li>
      {{/each}}
    </ul>
    {{/if}}
</script>

CSS

h2 {
  font-weight: bold;
  margin-bottom: 10px;    
}

p {
    margin-bottom: 10px;
}

ul {
  margin-bottom: 10px;  
  margin-left: 20px;    
  list-style-type: disc;
}

JavaScript

// SETUP

window.App = Ember.Application.create();

App.store = DS.Store.create({
    adapter: 'DS.fixtureAdapter'
});

App.Person = DS.Model.extend({
    name:    DS.attr('string'),
    project: DS.attr('string')
});

App.Project = DS.Model.extend({
    name: DS.attr('string')
})

App.Person.FIXTURES = [
    {id: 1, name: 'Bob',   projectId: 1},
    {id: 2, name: 'Terry', projectId: 1},
    {id: 3, name: 'Jim',   projectId: 2},
    {id: 4, name: 'Jane',  projectId: 2}    
];

App.Project.FIXTURES = [
    {id: 1, name: 'One'},
    {id: 2, name: 'Two'}
];

// INTERESTING STUFF FROM HERE...

App.ProjectView = Ember.View.extend({
    tagName: "li",
    click: function(){
        App.set("currentProject", this.get("content"));
    }
});

App.ProjectPeopleView = Ember.View.extend({
    templateName: "project-people",
    projectDidChange: function(){
        App.people.loadPeopleForProject(App.get("currentProject"));        
    }.observes("App.currentProject")
});
    
App.projects = Ember.ArrayProxy.create({
    content: App.store.findAll(App.Project)
});

// load all the data up from fixtures
// usually wouldn't happen until on demand
App.store.findAll(App.Person);

App.people = Ember.ArrayProxy.create({
    content: Ember.A(),
    loadPeopleForProject: function(project) {
        // this would usually be an Ajax request to load the data
        // this.set("content", App.store.find(App.Person, {projectId: project.id}));
        this.set("content", App.store.filter(App.Person, function(data){
            return data.projectId == project.get("id");
        }));
    }
});