JSFiddle - React, Tailwind, and code Playground

by fangyang

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script type="text/x-handlebars">
    {{partial header}}
    {{partial content}}
    {{partial footer}}
</script>

<script type="text/x-handlebars" data-template-name="_header">
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          {{#linkTo index class="brand"}}App{{/linkTo}}
          <div class="nav-collapse collapse">
            <ul class="nav">
                <li>{{#linkTo index}}Home{{/linkTo}}</li>
                <li>{{#linkTo dashboard}}My Dashboard{{/linkTo}}</li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>
</script>

<script type="text/x-handlebars" data-template-name="_content">
    <div class="container-fluid" style="margin-top: 40px;">
        {{outlet}}
    </div>
</script>

<script type="text/x-handlebars" data-template-name="_footer">
    <h4>Footer</h4>
</script>

<script type="text/x-handlebars" data-template-name="index">
    <h2>Home</h2>
</script>

<script type="text/x-handlebars" data-template-name="dashboard/star">
    <h3>One</h3>
    <div>
        Bacon ipsum dolor sit amet ribeye spare ribs fatback cow shank pork loin beef turducken short loin beef ribs. Beef tri-tip rump, flank pig turkey sirloin shank beef ribs swine salami pancetta capicola spare ribs. T-bone pork loin ribeye bacon ground round venison turducken pork chop ham hock shankle andouille sausage brisket. Tongue t-bone chuck, brisket tri-tip turducken doner turkey beef ribs venison flank spare ribs ham hock cow. Hamburger short ribs short loin, bresaola corned beef rump ground round...

CSS

em {font-style: normal;}
a {cursor: pointer;}

JavaScript

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

App.Router.map(function() {
    this.route('dashboard');
});

App.DashboardRoute = Em.Route.extend();

App.DashboardView = Em.View.extend({
    starActive: true,
    userActive: false,
    heartActive: false,
    resetDisplay: function() {
        this.set('starActive', false);
        this.set('userActive', false);
        this.set('heartActive', false);
    },
    star: function() { 
        console.log('star'); 
        this.resetDisplay();
        this.set('starActive', true);
    },
    user: function() {
        console.log('user'); 
        this.resetDisplay();
        this.set('userActive', true);
    },
    heart: function() {
        console.log('heart'); 
        this.resetDisplay();
        this.set('heartActive', true);
    }
});