JSFiddle - React, Tailwind, and code Playground

by Aras Balali Moghaddam

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://github.com/downloads/emberjs/ember.js/ember-1.0.pre.js"></script>
<script type="text/x-handlebars" data-template-name="application">

  <div class="button-container">
    <p>
  Demonstration of Ember's Run Loop. Each button creates and appends a View and runs code that attempts to color the view's DOM element green, move it around, and change its text, but this can only be done the element's been render by the time the code is run. As shown by this demo, the only way to immediately guarantee that all the necessary bindings have been propagated and DOM elements rendered is to put the view creation code within its own Em.run sub-RunLoop
</p>
    
  <button {{action createView}}>Create View, no sync, no subloop</button><br/>
    <button {{action createViewWithRunLoopSync}}>Create View and run Em.run.sync() before report</button><br/>
    <button {{action createViewInSubRunLoop}}>Create View in its own sub-RunLoop</button><br/>
    
    
  </div>
</script>

CSS

.blurb {
  position: absolute;
  height: 30px;
  width: 150px;
  border-radius: 75px;
  -webkit-border-radius: 75px;
  text-align: center;
  background: #ff5555;
  padding-top: 60px;
  padding-bottom: 60px;
  left: 50%;
  top: 50%;
  border: 1px solid black;
  font-size: 10px;
}
.button-container {
  position: relative;
  z-index: 10;
}
p {
  font-size: 14px;
  font-family: Myriad Pro;
  padding: 10px;
  background: white;
  background: rgba(255,255,255,0.9);
}

JavaScript

MyApp = Ember.Application.create();
MyApp.ApplicationView = Ember.View.extend({
  templateName: "application"
});
MyApp.ApplicationController = Ember.Controller.extend();

var n = 1; 
MyApp.BlurbView = Em.View.extend({
  classNames: "blurb",
  template: function() { return "no: " + (n++); }
});

function reportOn(view) {
  
  
  var $el = view.$();
  if($el) {
    $el.html("YES: element created before reportOn");
    $el.css({
      top: (Math.random() * 60).toFixed() + "%",
      left: (Math.random() * 60).toFixed() + "%",
      "background-color": "#55ff55"
    });
  }
}

MyApp.Router = Ember.Router.extend({
  enableLogging: true,
  loggingEnabled: true,
  root: Ember.Route.extend({
    route: '/',
    index: Ember.Route.extend({
      route: '/',
      createView: function() {
        var view;
        view = MyApp.BlurbView.create().append();
        reportOn(view);
      },
      createViewInSubRunLoop: function() {
        var view;
        Em.run(function() {
          view = MyApp.BlurbView.create().append();
        });
        reportOn(view);
      },
      createViewWithRunLoopSync: function() {
        var view;
        view = MyApp.BlurbView.create().append();
        Em.run.sync();
        reportOn(view);
      }
    })
  })
});

MyApp.initialize();