JSFiddle - React, Tailwind, and code Playground

by wbednarski

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.0.0/ember.js"></script>
<script type="text/x-handlebars">
    <h1>Hello SO!</h1>
    <p>Click few times: <a {{action "addChild"}} href="#">Add ChildViews</a></p>
    <p>I already have {{count}} children</p>
          
    {{#each children}}
        {{render 'child' this}}
    {{/each}}
</script>

<script type="text/x-handlebars" data-template-name="child">
    <p><strong>Hello I'm a Child with its own controller and view!</strong></p>
    <p>Here's some data: <strong>{{data}}</strong></p>
    <a {{action "huh"}} href="#">Fire some action on the controller!</a>
</script>

CSS

a {
    color: #4679BD
}

strong {
    color: #6E9831
}

.child-view {
    padding: 5px;
    border: 1px dashed #333
}

JavaScript

// app stuff
App = Ember.Application.create({});

App.ApplicationRoute = Ember.Route.extend({
    model: function() {
        return [{data: 'Some initial data #0'}];   
    }
});

App.ApplicationController = Ember.ArrayController.extend({
    
    children: Ember.computed.alias('model'),
    
    count: function() {
        return this.get('children').length;
    }.property('@each.children'),
        
    actions: {
        addChild: function () {
            var count = this.get('count');
            this.pushObject({data: 'Some data #' + count});
        }
    }
});

App.ChildController = Ember.ObjectController.extend({
    init: function () {
        alert('Hell no! I\'m not going to init!');
        return this._super();
    },
    actions: {
        huh: function () {
            alert('I\'ll never show up!');
        }
    }
});

App.ChildView = Ember.View.extend({
    tagName: 'div',
    classNames: ['child-view']
});