Dynamic tabs / lists with Ember js
I have been trying to learn Ember js by doing some experimentation until I have a lot of success but am slowly moving forward.
But now I am stuck, I am trying to create dynamic tabs without a router. I have these two violins
http://jsfiddle.net/drulia/BzRUF/
http://jsfiddle.net/drulia/uNNXy/
one is simple, keeping the links in the controller and the other with the ContainerView, but I've followed both approaches. I also tried StateManager but no luck again.
The problem in the first script is that I have not found any other way to get the content of an element in the view than to use this._parentView.get('content');
, which is not correct because I should not use anything with a prefix _
. But I have no idea how else I can check if an item belongs to an active tab.
The second problem is that I don't know how I can pin the content to the tabs. Also struggles with the ability to remove tabs because it {{action remove this target="App.Tabs"}}
always points to the same item.
I have read all the tutorials and APIs on http://emberjs.com , also read many other tutorials, most of them are of no real value because they are outdated, especially for me a newbie, because it is already quite difficult to attach together the updated snippets presented on the official page.
This sample todo app was very helpful https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences This is very good quality but areas like tabs are handwritten and they work through a router.
To summarize, the views are pretty cryptic to me at this point, so any light helping with dynamic tabs would be much appreciated.
source to share
Decision
http://jsfiddle.net/drulia/BzRUF/9/
Not perfect, but does the job, you can navigate, create and delete tabs.
To make it really useful, there must be some tabbed identifier, so the tabs can have the same title. But the idea is there, and I really hope someone finds it useful.
Below is the bulk from js to get an idea of what is 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 is the main part of the 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>
source to share