brobles82/jsbin.ekuzin.css

## jsbin.ekuzin.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;
}
textarea {
    clear: left;
    display: block;
    width: 200px;
    height: 200px;
}

## jsbin.ekuzin.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[Tabs for emberjs]" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.6/ember.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>

  <div id="content"></div>

<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>
		{{/view}}
	{{/each}}
    <button {{action createTab}}>+</button>
</div>
<div class="block">
	{{#each tab in tabs}}
		{{view App.TabInputView tabBinding="tab"}}
	{{/each}}
</div>
</script>

</body>
</html>

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

App.IndexController = Ember.ArrayController.extend({
    tabs: ['Tab1','Tab2'],
	activeTab: 'Tab1',
    counter: 2,
    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.TabInputView = Ember.TextArea.extend({
    placeholder: function() {
        return 'Empty Area of ' + this.tab;
    }.property(),
    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: '/'});
});
	#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;
	}
	textarea {
	clear: left;
	display: block;
	width: 200px;
	height: 200px;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="[Tabs for emberjs]" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.6/ember.min.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>

	<div id="content"></div>

	<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>
	{{/view}}
	{{/each}}
	<button {{action createTab}}>+</button>
	</div>
	<div class="block">
	{{#each tab in tabs}}
	{{view App.TabInputView tabBinding="tab"}}
	{{/each}}
	</div>
	</script>

	</body>
	</html>
	window.App = Ember.Application.create({
	rootElement: '#content'
	});

	App.IndexController = Ember.ArrayController.extend({
	tabs: ['Tab1','Tab2'],
	activeTab: 'Tab1',
	counter: 2,
	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.TabInputView = Ember.TextArea.extend({
	placeholder: function() {
	return 'Empty Area of ' + this.tab;
	}.property(),
	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: '/'});
	});