ember.js + Bootstrap: HOWTO make Tabs show correctly and make the .active tab initially visible.

gistfile1.md

Pardon the CoffeeScript.

In your code:

App.BootstrapInitComponent = Ember.Component.extend
	initTabs : (()->
		$('.nav-tabs .active').tab('show')
	).on 'didInsertElement'

---

In your template:

	<ul class="nav nav-tabs">
		<li><a class="active" data-toggle="tab" href="#transactions">Transactions</a></li>
		<li><a data-toggle="tab" href="#vouchers">Vouchers</a></li>
	</ul>
	{{bootstrap-init}}

---

That's it. The tab with class="active" will be visible upon view load. I haven't tried it yet, but the same method should work fine with others Bootstrap elements that need initialization too (popovers, dropdowns, whatnot). Just add code to initTabs.