JSFiddle - React, Tailwind, and code Playground

by skane

HTML

<script src="https://raw.github.com/wycats/handlebars.js/1.0.0-rc.3/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-rc.1.js"></script>
<script type="text/x-handlebars" data-template-name="parent">
    {{ friendCounter }}
    {{ view "App.SingleEmitter" }}
    {{ view "App.DoubleEmitter" }}
</script>

<script type="text/x-handlebars" data-template-name="fire1">
    <p>Fire One</p>
</script>
<script type="text/x-handlebars" data-template-name="fire2">
    <p>Fire Two</p>
</script>

CSS

div.firebutton {
    height: 50px;
    width: 100px;
    background-color: green;
}

CoffeeScript

window.App = Ember.Application.create
    LOG_TRANSITIONS: true

App.Parent = Em.Object.create
    friendCounter: 0
    
App.ParentController = Em.ObjectController.extend()

App.ParentView = Em.View.extend
    templateName: 'parent'
    
    
App.Router.map () ->
    @resource('parent')

App.IndexRoute = Em.Route.extend
    redirect: () ->
        @replaceWith "parent"
App.ParentRoute = Em.Route.extend
    model: (params) ->
        console.log params
    setupController: (controller) ->
        controller.set "content", App.Parent
    
App.SingleEmitterView = Em.View.extend
    className: ['firebutton']
    templateName: "fire1"
    fireAMissile: () ->
        @trigger "fireAMissile", 1

App.DoubleEmitterView = Em.View.extend
    className: ['firebutton']
    templateName: "fire2"
    fireAMissile: () ->
        @trigger "fireAMissile", 1