JSFiddle - React, Tailwind, and code Playground

by mehulkar

HTML

<script src="http://builds.emberjs.com.s3.amazonaws.com/handlebars-1.0.0-rc.4.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-4daa46780df82d754b1fa072a1259899501ac360.js"></script>
<script type="text/x-handlebars">
    {{view App.RotatingView}}
</script>

JavaScript

App = Ember.Application.create();

App.RotatingView = Ember.View.extend({
  templateString: null,
  views: ["a", "b", "c"],
  init: function() {
    var string;
    string = this._getNextTemplate();
    this.set('templateString', string);
    return this._super();
  },
  template: (function() {
    var string;
    string = this.get("templateString");
    return Ember.Handlebars.compile(string);
  }).property("templateString"),
  templateDidChange: (function() {
    var _this = this;
    return setInterval(function() {
      var string;
      string = _this._getNextTemplate();
      _this.set('templateString', string);
      return Ember.run.next(function() {
        return _this.rerender();
      });
    }, 1000);
  }).observes("templateString"),
  _getNextTemplate: function() {
    var currentTemplateIndex, length, views;
    views = this.get('views');
    length = views.length;
    currentTemplateIndex = views.indexOf(this.get('templateString'));
    if ((currentTemplateIndex + 1) === length) {
      return views[0];
    } else {
      return views[currentTemplateIndex + 1];
    }
  }
});