JSFiddle - React, Tailwind, and code Playground

by simonweil

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.min.js"></script>
<div id="app">
	<script type="text/x-handlebars">
		Test <b>{{App.name}}</b><br><br>
	    {{#each App.MyController.content}}
               this should be printed: "{{value}}" & "{{computed}}"<br><br>
        	{{view App.ViewsContainer}}
		{{else}}
			<p><b>Error:</b> No values.</p>
	    {{/each}}
	</script>
</div>

CSS

.second {
    margin-left: 5px;
    padding-left: 5px;
    border-left: 1px solid black;
}

JavaScript

App = Ember.Application.create({
    rootElement: '#app',
    name: 'My app',
    ready: function(){
        console.log('ready');
    },
});

App.mod = Ember.Object.extend({
    value: null,

    computed: function(value) {
        return 'computed';
    }.property()
});

App.MyController = Ember.ArrayController.create({
    content: [],
    init: function(){
        // create an instance of the model
        var item = App.mod.create({
            value: 'somevalue'
        });
        this.pushObject(item);
    }
});

App.SecondView = Ember.View.extend({
    tagName: 'span',
    classNames: ['second'],
    template: Ember.Handlebars.compile("second view with values: '{{value}}' & '{{computed}}'"),
});

App.FirstView = Ember.View.extend({
    tagName: 'span',
    classNames: ['first'],
    template: Ember.Handlebars.compile("first view"),
});

App.ViewsContainer = Ember.ContainerView.create({
    tagName: 'span',
    classNames: ['Container'],
    childViews: ['first_v', 'second_v'],
    first_v: App.FirstView,
    second_v: App.SecondView
});