javascript - how to implement Bootstrap tabs for each item of Ember's list-view? -

I am using a list of items to show and I want to apply one to show the details of each item I am not, however, to figure out how to make this beautiful in Amber. Here's what I have done here:

Javascript:

  AP = Amber.app .create (); Var: 'Tab # 1', body: 'Content of Tab # 1', Characters: 'Description1'}, {Title: 'Tab # 2', Body: 'Tab # 2' Content ' , Description: 'description2'}, {title: 'Tab # 3', body: 'Content of Tab # 3', desc: 'description3'}, {title: 'Tab # 4', body: 'Tab # 4 Content of 'Tab # 5', desc: 'description5'}, {title: 'Tab # 6', body: 'content of' Tab # 5 ',' title: 'Description4'}, {title: 'Tab # 5', body: ' Content of Tab # 6, Characters: 'Description 6'}, {Title: 'Tab # 7', Body: Content of 'Tab # 7', Characters: 'description7'}, {title: 'Tab # 8' Body: 'Content of Tab # 8', Characters: 'Description 8'}, {Title: 'Tab # 9', Body: ' Content of Tab # 9, Characters: 'Description9'}, {title: 'Tab # 10', Body: 'Content of Tab # 10', Description: 'description10'}]; App.ApplicationRoute = Ember.Route.extend ({Model: Function () {Return Data;}}); App.MyListComponent = Ember.Component.extend ({selectTab: function (name) {this. $ ("A [data-toggle = '% @']". Fmt (name)) .Parent (). Siblings (). $ ("One [data-toggle = '% @']". Fmt (name)). ] ". Fmt (name)) parent (). () Parent () parent (). ('Seems tab-content') children ('div') $ ("A [Data-Toggle = '% @']". Fmt (Name)) Parents (). Parents (). Parents (). Parents (.) Tabs - content # '+ name) .addClass (' active ');}});  

As you can see, the selector Received little silly, but it works (I'm sure it is a much more efficient and beautiful selector!)

HTML: handlebars + bootstrap:

  
 DOCTYPE html>   gt; Meta charset = "UTF-8"> Title  & Lt; Script src = "http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.3.1/ember.min.js" & gt; & Lt; / Script & gt; & Lt; Script src = "http://builds.emberjs.com/list-view/list-view-latest.js" & gt; & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Script type = "text / x-handlaber" & gt; {{Ember-list items = content height = 800 rowHeight = 100}} {{my-list item = this id = this.id}} {{/ ember-list}} & lt; / Script & gt; & Lt; Script type = "text / x-handlebars" data-template-name = "component / my-list" & gt; & Lt; Div class = "container" & gt; & Lt; Div class = "line margin-down-10" & gt; & Lt; Div class = "tab-v1" & gt; & Lt; Ul class = "nav nav-tabs" & gt; & Lt; Li class = "active" & gt; & Lt; A href = "# home" data-toggle = "home" {{action "selectTab" "home"}} & gt; Photos & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "# profile" data-toggle = "profile" {{action "selectTab" "profile"}} & gt; Profile & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; a href = "# Details" data-toggle = "description" {{action "selectTab" "description"}} & gt; Details & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Div class = "tab-content" & gt; & Lt; Div class = "tab-panel active" id = "home" & gt; {{Item.title}} & lt; / Div & gt; & Lt; Div class = "tab-panel" id = "profile" & gt; {{Item.body}} & lt; / Div & gt; & Lt; Div class = "tab-panel" id = "description" & gt; {{Item.desc}} & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Script & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

I did not want to introduce route-tabs and with the implementation of the above that I feel I can not protect the user's touch position, however, I do not do it I am part of the application.

This is one of the codes above to look into the verb.

How to replace the part of jQuery that it is only amber? Is it better to achieve this?

Thank you!