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">
    {{#each lady in crazyladies}}
        {{ view 'App.CrazyLadyView' contentBinding='lady'}}
    {{/each}}
    {{#unless catCal }}
        <button {{action catCal target="view"}}>Calibrate Cats</button>
    {{/unless}}
</script>
<script type="text/x-handlebars" data-template-name="crazylady">
    <p>Some crazy lady has {{ view.content.cats }} cats!!</p>
</script>

<script type="text/x-handlebars" data-template-name="catcal">
    <p>There are currently {{view.catCounter}} syncronised cats</p>
    {{ view Ember.TextField valueBinding='view.catCounter' }}
</script>

CoffeeScript

window.App = Ember.Application.create()

App.CrazyLady = Em.Object.extend
    cats: 5
    setLink: (master) ->
        @set "master", master
        Ember.bind(@, 'cats', 'master.catCounter')
    
App.ApplicationController = Em.Controller.extend
    crazyladies: [App.CrazyLady.create(cats:2),
                  App.CrazyLady.create(cats:7),
                  App.CrazyLady.create(cats:9) ]
    catCal: false
    
App.ApplicationView = Em.View.extend
    templateName: 'application'
    catCal: () ->
        @set('controller.catCal', true)
        catCal = App.FelineCalibrationSystem.create( objects: @get('controller.crazyladies'),
                                                     attribute: 'cats')
        catCal.append()
    
App.CrazyLadyView = Em.View.extend
    templateName: "crazylady"
    
App.FelineCalibrationSystem = Em.View.extend
    templateName: "catcal"
    catCounter: 100
    init: () ->
        @_super()
        for object in @get('objects')
            object.setLink(@)