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">
    <h3>\{{render "awesome"}}</h3>
    {{render "awesome"}}
    <h3>\{{render "awesome"}} inside ContainerView->ChildView</h3>
    <p><a {{action "addViewToContainerView"}} href="#">Add ChildView with embede \{{render}} helper</a></p>
</script>

<script type="text/x-handlebars" data-template-name="child_view">
    <p>child view</p>
    {{render "awesome"}}
    {{!view App.AwesomeView}}
</script>

<script type="text/x-handlebars" data-template-name="awesome">
    <p><strong>Hello I'm ChildView!</strong></p>
    <a {{action "huh"}} href="#">Fire some action on the controller!</a>
</script>

CSS

a {
    color: #4679BD
}

strong {
    color: #6E9831
}

#app {
    position: absolute;
    top: 0
}

#container-view {
    margin-top: 250px;
    padding: 10px;
    border: 1px dashed #333
}

#container-view div {
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc    
}

JavaScript

// app stuff
App = Ember.Application.create({});
    
App.ApplicationController = Ember.Controller.extend({
    actions: {
        addViewToContainerView: function () {
            App.containerView.pushObject(Ember.View.views['container-view'].createChildView(App.ChildView));   
        }
    }
});

App.ApplicationView = Ember.View.extend({
    elementId: 'app'
});

// container view stuff
App.ContainerView = Ember.ContainerView.extend({
    elementId: 'container-view'
});

// view stuff
App.ChildView = Ember.View.extend({
    templateName: 'child_view'
});

App.AwesomeView = Ember.View.extend({
    init: function () {
        alert('Hello from AwesomeView');
        return this._super();
    },
});

App.AwesomeController = Ember.ObjectController.extend({
    init: function () {
        alert('Hello from AwesomeController');
        return this._super();
    },
    actions: {
        huh: function () {
            alert('huh');
        }
    }
});

// container view can't be added from the template...
App.containerView = App.ContainerView.create();
App.containerView.append();