I'm trying to use the Bootstap.Tabs component to create some bootstrap tabs.
I've declared the tabs as follows:
{{view Bootstrap.Tabs
contentBinding="App.tabsContent"
selectionBinding="App.selection"}}
And I'm using the following code to set up the content for the tabs.
App.ready = function() {
App.tabsContent= Ember.A([{value: "cred_app.associate_clients", title: "Associate clients"}, {value: "cred_app.facilities", title: "Facilities"}]);
};
Using this I can successfully render the bootstrap tabs.. and the route name pops up in App.selection.
I just don't understand how to get the links working, so that controller will transition to the route. I'd also like to get the active tab get the correct css applied to it so that the tabs show which route is currently being displayed.
UPDATE:
I have implemented this using a more simplistic approach:
<ul class='nav-tabs'>
{{#linkTo 'cred_app.associate_clients' model tagName='li' href=false}}
{{#linkTo 'cred_app.associate_clients' model}}Client Hierachy{{/linkTo}}
{{/linkTo}}
</ul>
You can do something like this: (using my derived Bootstrap.Tabs implementation)
{{#view Bootstrap.TabContainerView currentView="patient"}}
<ul class="nav nav-tabs">
{{#view Bootstrap.TabView value="patient"}}<a>Patient</a>{{/view}}
{{#view Bootstrap.TabView value="visits"}}<a>Visits</a>{{/view}}
{{#view Bootstrap.TabView value="contacts"}}<a>Contacts</a>{{/view}}
{{#view Bootstrap.TabView value="sessions"}}<a>Sessions</a>{{/view}}
</ul>
{{#view Bootstrap.TabPaneView viewName="patient"}}
{{render "patient"}}
{{/view}}
{{#view Bootstrap.TabPaneView viewName="visits"}}
{{render "visits"}}
{{/view}}
{{#view Bootstrap.TabPaneView viewName="contacts"}}
{{render "contacts"}}
{{/view}}
{{#view Bootstrap.TabPaneView viewName="sessions"}}
{{render "sessions"}}
{{/view}}
{{/view}}
or using the router:
<ul class="nav nav-tabs">
{{#view Bootstrap.TabItem item="patient"}}
{{#linkTo "tab.patient" content}}Patient{{/linkTo}}
{{/view}}
{{#view Bootstrap.TabItem item="visits"}}
{{#linkTo "tab.visits" content}}Visits{{/linkTo}}
{{/view}}
{{#view Bootstrap.TabItem item="contacts"}}
{{#linkTo "tab.contacts" content}}Contacts{{/linkTo}}
{{/view}}
{{#view Bootstrap.TabItem item="sessions"}}
{{#linkTo "tab.sessions" content}}Sessions{{/linkTo}}
{{/view}}
</ul>
{{outlet}}
the magic is done by the Bootstrap.TabItem, it gets the active state from the linkTo helper
Bootstrap.TabItem = Ember.View.extend({
tagName: 'li',
classNameBindings: ['active'],
activeChanged: function () {
var self = this;
Ember.run.next(this, function () { //delay
if (!self.isDestroyed) {
self.set('active', self.get('childViews.firstObject.active'));
}
});
}.observes('childViews.firstObject.active') //get the active state from the linkTo helper
});
now you only need a router, something like this:
App.Router.map(function (match) {
...
this.resource('tab', { path: '/tab' }, function () {
this.route('patient');
this.route('visits');
this.route('contacts');
this.route('sessions');
});
...
});
a jsFiddle might help
Please look at Bootstrap for Ember
It fully supports Pills & Tabs:
https://github.com/ember-addons/bootstrap-for-ember
Showcase: ember-addons.github.io/bootstrap-for-ember
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With