JSFiddle - React, Tailwind, and code Playground

by Aleh Krutsikau

HTML

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.3.0/ember.js"></script>
<div id="content"></div>

<script type="text/x-handlebars" data-template-name="tab-panel">
    <div>Content of tab {{tab}}</div>
</script>

<script type="text/x-handlebars" data-template-name="index">
<div class="block">
	{{#each tab in tabs}}
		{{#view App.TabView tabBinding="tab"}}
    {{tab}} <span class="close" {{action closeTab tab bubbles=false}}>x</span> <span class="create" {{action createTab}}>c</span>
		{{/view}}
	{{/each}}
    <button {{action createTab}}>+</button>
</div>
<div class="block">
	{{#each tab in tabs}}
		{{view App.TabPanelView tabBinding="tab"}}
	{{/each}}
</div>
</script>

CSS

#content {
    margin: 20px;
}
.block {
    margin-top: 10px;
}
.block .btn {
    cursor: pointer;
    float: left;
    margin: 0 10px 10px;
}
.active {
    font-weight: bold;
}
.btn .close {
    background: #999;
    color: #fff;
    cursor: pointer;
    padding: 0px 6px 2px;
    font-weight: normal;
}
.btn .create {
    background: #4B4;
    color: #fff;
    cursor: pointer;
    padding: 0px 6px 2px;
    font-weight: normal;
}
textarea {
    clear: left;
    display: block;
    width: 200px;
    height: 200px;
}

JavaScript

window.App = Ember.Application.create({
	rootElement: '#content'
});

App.IndexController = Ember.ArrayController.extend({
    tabs: ['Tab1','Tab2'],
	activeTab: 'Tab1',
    counter: 2,
    actions: {
        closeTab: function(tab) {
            var i = this.tabs.indexOf(tab);
            this.tabs.removeAt(i);
            if(tab === this.activeTab)
                this.set('activeTab',this.tabs.objectAt(0));
        },
        createTab: function() {
            var newTab = 'Tab' + ++this.counter;
            this.tabs.pushObject(newTab);
            this.set('activeTab',newTab);
        }
    }
});

App.TabPanelView = Ember.View.extend({
    templateName: 'tab-panel',
    isVisible: function(s) {
        var activeTab = this.get('controller.activeTab');
        return Boolean(activeTab === this.tab);
    }.property('controller.activeTab')
});

App.TabView = Ember.View.extend({
    classNameBindings: [':btn','active'],
	active: function() {
        var activeTab = this.get('controller.activeTab');
		return Boolean(activeTab === this.tab);
	}.property('controller.activeTab'),
	click: function(event) {
		this.set('controller.activeTab', this.tab);
	},
    didInsertElement: function() {
        this.$().hide().fadeIn();
    }
});

App.Router.map(function() {
	this.resource('index', {path: '/'});
});