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-1.0.0-rc.5.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    {% verbatim %}
    <div id="wrapper-content">
        {{outlet}}
    </div>
    {% endverbatim %}
</script>
 
<script type="text/x-handlebars" data-template-name="index">
    {% verbatim %}
        <section role="primary">
            <div class="charts">
                <div class="chart-row">
                    {{view Social.GrowthView controllerBinding="controllers.growth"}}
                </div>
            </div>
        </section>
    {% endverbatim %}
</script>
 
<script type="text/x-handlebars" data-template-name="growth">
    {% verbatim %}
        <h2>{{view.title}}</h2>
        <div {{ bindAttr id="id"}} class="chart-container">
            <svg></svg>
        </div>
    {% endverbatim %}
</script>

JavaScript

Social = Ember.Application.create();
// View definitions
Social.GrowthView = Ember.View.extend({
    elementId: 'chart-followers',
    templateName: 'growth',
    title: 'Account Growth',
    didInsertElement: function() {
        console.log(this.get('controller.data'));
    }
 });

Social.Route = Ember.Route.extend({
    setupController: function() {
        var controller = this.controllerFor('growth');
        controller.loadReportData();
        // you could deal with the promise's callback
        // here if you wanted also, but it works to do
        // it in the controller growthController as well
    },
});
Social.IndexController = Ember.Controller.extend({
    needs: ['growth']
});
 
Social.GrowthController = Ember.ArrayController.extend({
    title: 'Account Growth',

    loadReportData: function loadReportData() {
        var that = this;
        // load account growth data
        var url = "/api/1/growth/"
        $.getJSON(url)
            .then(function(response){
                that.set('content', response);
            });
    }
});