JSFiddle - React, Tailwind, and code Playground

by chrisconley

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/emberjs/ember.js/ember-latest.js"></script>
<div id="ember-test">
  <script type="text/x-handlebars" data-template-name="application">
    {{outlet messages}}
    {{outlet message-details}}
  </script>
    
  <script type="text/x-handlebars" data-template-name="messages">
      {{#each message in controller}}
          {{#view view.MessageView contentBinding="message"}}
              <a {{action showDetails message href=true}}>
                 {{message.subject}}
              </a>
              <br/>
          {{/view}}
      {{/each}}
      <hr/>
  </script>
  
  <script type="text/x-handlebars" data-template-name="message-details">
    Subject: {{subject}}
      <br/>
    Sent: {{sent}}
  </script>
</div>

CSS

.active a {
  background-color: green;
  color: white;    
}

JavaScript

$(function() {
    App = Ember.Application.create({
        rootElement: $('#ember-test')
    });
    App.ApplicationView = Ember.View.extend({
        templateName: 'application'
    });
    App.ApplicationController = Ember.Controller.extend();

    App.MessagesController = Ember.ArrayController.extend();
    App.MessagesView = Ember.View.extend({
        templateName: 'messages',
        selectedBinding: 'controller.selected',
        MessageView: Ember.View.extend({
            classNameBindings: 'isActive:active'.w(),
            isActive: function() {
                return this.get('content') === this.get('parentView.selected');
            }.property('content', 'parentView.selected')
        })

    });
    App.MessageDetailsController = Ember.ObjectController.extend();
    App.MessageDetailsView = Ember.View.extend({
        templateName: 'message-details'
    });

    App.Router = Ember.Router.extend({
        location: Ember.Location.create({
            implementation: 'none'
        }),
        enableLogging: true,
        root: Ember.Route.extend({
            index: Ember.Route.extend({
                route: '/',
                showDetails: Ember.Route.transitionTo('show'),
                connectOutlets: function(router) {
                    router.get('applicationController').connectOutlet('messages', 'messages', [{
                        subject: 'Hi there',
                        sent: '2 days ago'},
                    {
                        subject: 'Hi Again',
                        sent: '1 day ago'}]);
                }
            }),
            show: Ember.Route.extend({
                route: '/message/:subject',
                showDetails: Ember.Route.transitionTo('show'),
                connectOutlets: function(router, context) {
                    router.set('messagesController.selected', context);
                    router.get('applicationController').connectOutlet('message-details', 'messageDetails', context);
       ...