JSFiddle - React, Tailwind, and code Playground

by harshavarma

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.4.0-beta.6/ember.debug.js"></script>
<div id="container">
    
    <!-- application template -->
    <script type="text/x-handlebars" data-template-name="application">
        {{outlet}}
    </script>
    
    <!-- Index template -->
    <script type="text/x-handlebars" data-template-name="index">
        {{#link-to "projects"}}Go to projects{{/link-to}}
    </script>
    
    <!-- projects template -->
    <script type="text/x-handlebars" data-template-name="projects">        
        {{#each project in model}}
            <div class="project">
                <h3>{{project.name}}</h3>
                {{#link-to "listings" project.id}}View Listings{{/link-to}}
            </div>
        {{/each}}        
    </script>
    
    <!-- listings template -->
    <script type="text/x-handlebars" data-template-name="listings">        
        {{#each listing in model}}
            <div class="listing">
                <h3>{{listing.propertyCode}}</h3>
            </div>
        {{/each}}
    </script>        
            
</div>

JavaScript

var App = Ember.Application.create({
    rootElement: '#container'
});

/* ROUTER */
App.Router.map(function() {
    this.resource('projects');
    this.resource('listings', {path: 'projects/:project_id/listings'});
});

/* ROUTES */
App.ProjectsRoute = Ember.Route.extend({
    model: function() {
        return App.projects;
    }
});

App.ListingsRoute = Ember.Route.extend({
    model: function(params) {
        var projectId = params.project_id;
        return App.listings.filter(function(listing) {
           return projectId === listing.projectId; 
        });
    }
});

App.projects = [
    {
        id: 1,
        name: 'Opportunity'        
    },
    {
        id: 2,
        name: 'Curiosity'
    },
    {
        id: 3,
        name: 'Cassini'
    }
];               

App.listings = [
    {
        propertyCode: 'Ref306',
        name: 'x',
        projectId: 2
    },
    {
        propertyCode: 'Ref308',
        name: 'y',
        projectId: 2
    },
    {
        propertyCode: 'Ref309',
        name: 'z',
        projectId: 2
    },
    {
        propertyCode: 'Ref301',
        name: 'a',
        projectId: 1
    },
    {
        propertyCode: 'Ref302',
        name: 'b',
        projectId: 1
    },
    {
        propertyCode: 'Ref303',
        name: 'c',
        projectId: 1
    },
    {
        propertyCode: 'Ref304',
        name: 'l',
        projectId: 3
    },
    {
        propertyCode: 'Ref305',
        name: 'm',
        projectId: 3
    },
    {
        propertyCode: 'Ref300',
        name: 'n',
        projectId: 3
    }
];