JSFiddle - React, Tailwind, and code Playground

by kwladyka

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0.beta6/handlebars.min.js"></script>
<script src="https://github.com/downloads/pangratz/ember.js/ember-latest.js"></script>
    <script type="text/x-handlebars" data-template-name="application">
        {{view App.NavbarView}}
        {{outlet}}
    </script>

    <script type="text/x-handlebars" data-template-name="navbar">
        <div id="menu" class="grid_12">
            <ul>
                <li><a {{action gotoAbout}} >About</a></li>
                <li><a {{action gotoProjects}} >Projekty</a></li>
                <li><a {{action gotoTechnology}} >Technologie</a></li>
                <li><a {{action gotoContact}} >Kontakt</a></li>
            </ul>
        </div>
    </script>

<div id="emberjs-container"></div>

    <script type="text/x-handlebars" data-template-name="contact">
contact
    </script>
    <script type="text/x-handlebars" data-template-name="about">
about
    </script>
    <script type="text/x-handlebars" data-template-name="projects">
projects
    </script>
    <script type="text/x-handlebars" data-template-name="technology">
technology
    </script>
    <script type="text/x-handlebars" data-template-name="contact">
contact
    </script>

CSS

a {
    color: blue;
}

.menu-active {
    color: red;
}

JavaScript

$(function() {

console.log("### emberjs start ###");

App = Em.Application.create({
    rootElement: '#emberjs-container'
});

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

App.NavbarView = Em.View.extend({
    templateName: 'navbar',
});


App.AboutView = Em.View.extend({
    templateName: 'about'
});

App.ProjectsView = Em.View.extend({
    templateName: 'projects'
});

App.TechnologyView = Em.View.extend({
    templateName: 'technology'
});

App.ContactView = Em.View.extend({
    templateName: 'contact'
});


App.Router = Em.Router.extend({
    enableLogging: true,
    location: 'hash',

    root: Em.Route.extend({
        // EVENTS
        gotoAbout: Ember.Route.transitionTo('about'),
        gotoProjects: Ember.Route.transitionTo('projects'),
        gotoTechnology: Ember.Route.transitionTo('technology'),
        gotoContact: Ember.Route.transitionTo('contact'),

        // STATES
        about: Em.Route.extend({
            route: '/',
            connectOutlets: function (router, context) {
                router.get('applicationController').connectOutlet('about');
            }
        }),

        projects: Em.Route.extend({
            route: '/projects',
            connectOutlets: function (router, context) {
                router.get('applicationController').connectOutlet('projects');
            }
        }),

        technology: Em.Route.extend({
            route: '/technology',
            connectOutlets: function (router, context) {
                router.get('applicationController').connectOutlet('technology');
            }
        }),

        contact: Em.Route.extend({
            route: '/contact',
            connectOutlets: function (router, context) {
                router.get('applicationController').connectOutlet('contact');
            }
        })
    })
});

App.initialize();

});