Dynamic Tabs/Lists with Ember js - dynamic

Question

I'm trying to learn Ember js, doing some experiments, so far not much success, but slowly moving forward.
But now I got stuck, I'm trying to create a dynamic tabs without router. I have these two fiddles
http://jsfiddle.net/drulia/BzRUF/
http://jsfiddle.net/drulia/uNNXy/
one simple, keeping references in the controller and another one with ContainerView, but I have stuck on both approaches. I tried StateManager as well, but once again with no luck.
Problem in first fiddle is that I found no other way to get element's content in the View than using this._parentView.get('content'); which is not right because I'm not suppose to use anything with prefix _ . But I have no idea how else I can actually check if element belongs to active tab.
Second fiddle main problem is that I have no clue how can I attach content to the tabs. Also struggling with ability to remove tabs, because {{action remove this target="App.Tabs"}} allways points to the same element.
I been reading all guides and API on http://emberjs.com, also was reading plenty of other tutorials, most of them have no real value because they outdated, especially for me newbie, because it is already hard enough to attach together up to date pieces provided in the official page.
This todo app example though, was very useful https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences It is very good quality, but areas like tabs is handwritten and they work via router.
To sum-up, at the moment the Views is quite a mystery for me, so any light helping out with dynamic tabs would be much appreciated.

Answer 1

Solution
http://jsfiddle.net/drulia/BzRUF/9/
Not perfect, but does the job, you can navigate, create and delete the tabs.
To make it really usable, there should be some id's with tabs, so then tabs could have same title. But the idea is there and I truly hope that someone will find it useful.
Below are main part from of js to get the idea what's going on
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')
});
And here the main part of html
{{#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>