JSFiddle - React, Tailwind, and code Playground

by krisselden

HTML

<script src="https://raw.github.com/wycats/handlebars.js/1.0.rc.2/dist/handlebars.js"></script>
<script src="https://github.com/emberjs/ember.js/blob/latest-builds/ember.js"></script>
<html>
    
    <body>
        <script type="text/x-handlebars">
            {{outlet}}
        </script>
        <script type="text/x-handlebars" data-template-name="dashboardRoot">
            ContainerView: {{view Ember.ContainerView viewName = "dashboardView"}}
            childViews.length: {{view.dashboardView.childViews.length}};
            childViewCount: {{view.childViewCount}};
            Element ID: {{view.dashboardView.elementId}};
        </script>
        <div id="root"></div>
    </body>

</html>

JavaScript

window.App = Ember.Application.create({
    rootElement: '#root',
    // Extend to inherit outlet support
    ApplicationController: Ember.Controller.extend(),
    ApplicationView: Ember.View.extend({
        templateName: 'application'
    }),
    ready: function () {}
});

App.Router.map(function (match) {
    this.route('dashboardRoot');
});

App.IndexRoute = Ember.Route.extend({
    redirect: function () {
        this.transitionTo('dashboardRoot');
    }
});

App.DashboardRoute = Ember.Route.extend({});

App.DashboardRootController = Ember.ObjectController.extend({});

App.DashboardRootView = Ember.View.extend({
    templateName: 'dashboardRoot',
    dashboardView: null,
    childViewCount: null,
    didInsertElement: function () {
        Ember.run.scheduleOnce('afterRender', this, function () {
            this.get('dashboardView.childViews').pushObject(
            Ember.View.create({
                template: Ember.Handlebars.compile("<div style='background-color: red;'>Hello!</div>")
            }));
            this.get('dashboardView.childViews').pushObject(
            Ember.View.create({
                template: Ember.Handlebars.compile("<div style='background-color: green;'>Hello Again!</div>")
            }));
            this.set('childViewCount', this.get('dashboardView.childViews.length'));
        });
    }
});