JSFiddle - React, Tailwind, and code Playground

by skane

HTML

<script src="https://raw.github.com/wycats/handlebars.js/1.0.rc.2/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-pre.4.js"></script>
<script src="handlebars"></script>
<script type="text/x-handlebars">
    <h1>Add prop3, prop4, and/or prop5 to styleProps on the Controller</h1>
    <br>
     {{styleString}}<br>
     {{#unless truthShown}}
     <button {{action "test"}}>Reveal The Truth</button>
     {{/unless}}
</script>

CoffeeScript

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

App.StyleMixin = Em.Mixin.create
    test: (e) ->
        @set 'prop2', 'ROUGH'
        @set 'prop4', ' OTHERS'
        @set 'truthShown'
    styleProps: []
    compStyleProps: (->
      val = Em.A()
      for prop in @get "styleProps"
        trackedProp = @get prop
        val.push(trackedProp)
      return val
    ).property('prop1', 'prop2', 'prop3', 'prop4', 'prop5')
    
    styleString: (->
      outputString = ""
      for item in @get 'styleProps'
        value = @get item
        outputString = outputString + value
      return outputString
    ).property('compStyleProps.@each')

App.ApplicationController = Em.Controller.extend App.StyleMixin,
  styleProps: ['prop1', 'prop2', 'prop3', 'prop4']
  prop1: 'Ember is '
  prop2: 'CAKE'
  prop3: ' according to'
  prop4: ' SOME'
  truthShown: false
    
  test: (e) ->
    @set 'prop2', 'ROUGH'
    @set 'prop4', ' OTHERS'
    @set 'truthShown', true