JSFiddle - React, Tailwind, and code Playground

by dgeb

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.5.min.js"></script>
<script type="text/x-handlebars" data-template-name="text-progress-indicator">
    {{model.text}}
</script>
<script type="text/x-handlebars" data-template-name="fake-async-process-view">
    {{view indicator}}
    <button {{action "process"}}>Do Something!</button>
</script>

CSS

body {
    font: 12px Helvetica, Arial, sans-serif;
}
.text-progress-indicator {
    border: 1px solid black;
    border-radius: 5px;
    padding: 5px 10px;
}
.text-progress-indicator.ready, .text-progress-indicator.success {
    border-color: green;
    background-color: #05ff50;
}
.text-progress-indicator.processing {
    border-color: blue;
    background-color: #aed1e8;
}
.text-progress-indicator.failed {
    border-color: red;
    background-color: #ff5656;
}

JavaScript

window.MyApp = Ember.Application.create();

MyApp.someModel = Ember.Object.create({
  state: "ready",

  text: function() {
    switch(this.get("state")) {
      case "ready":
        return "Ready to do some stuff!";
            
      case "processing":
        return "Doing something complicated";
            
      case "failed":
        return "something went wrong :(";
            
      case "success":
        return "all done!";
    }
  }.property("state")

});

MyApp.TextProgressIndicator = Ember.View.extend({
  classNames: 'text-progress-indicator'.w(),
  classNameBindings: 'model.state'.w(),
  tagName: 'span',
  templateName: "text-progress-indicator",
  modelBinding: "MyApp.someModel"
});

MyApp.FakeAsynchronousProcessView = Ember.View.extend({
  templateName: "fake-async-process-view",
  
  indicator: MyApp.TextProgressIndicator,

  viewStateBinding: "indicatorView.model.state",

  indicatorView: function() {
    return this.get("childViews").filter(function(view) { return view instanceof MyApp.TextProgressIndicator; })[0];
  }.property("childViews"),

  process: function(ev) {
    if(this.get("viewState") === "processing") {
      return;
    }

    var self = this;

    var randomSeconds = Math.floor(Math.random() * 5000);

    this.set("viewState", "processing");

    setTimeout(function() {
      var nextState = Math.random() >= 0.5 ? "success" : "failed";
      self.set("viewState", nextState);
    }, randomSeconds);
  }
});

jQuery(document).ready(function() {
  window.view = MyApp.FakeAsynchronousProcessView.create().append();
});