javascript - Show tabs with bootstrap and knockout.js -

i trying show tabs bootstrap.

with code tabs don't appear.

view:

<div id="tabs" class="container">   <ul class="nav nav-tabs">     <ul class="folders" data-bind="foreach: folders">       <li data-bind="text: $data, css:{ selected: $data == $root.chosenfolderid() }, click: $root.gotofolder" >         <a href="#home" data-toggle="tab"></a>         <a href="#home" data-toggle="tab">       </li>     </ul>   < /ul> </div> 

view model:

function webmailviewmodel() {     // data     var self = this;     self.folders = ['inbox', 'archive', 'sent', 'spam'];     self.chosenfolderid = ko.observable();      // behaviours         self.gotofolder = function(folder) { self.chosenfolderid(folder); };     };  ko.applybindings(new webmailviewmodel()); 

what problem code?

you have a lot of problems in code you've posted:

• the markup you've posted invalid: there's stray a tag not closed.
• the markup you've posted invalid: there's ul that's direct descendant of first ul, want one.
• why there two a tags inside 1 tab li? want one.
• you have both content li , text binding (which overwrite content). bootstrap requires a should move binding element i'd think.
• the click binding should on a tag, not li.
• you render selected class active li items, if @ the bootstrap documentation you'll see should active.
• you mix data-* attributes bootstrap (i.e. data-toggle) knockout way of selecting tabs (click , css bindings). want latter

after fixing of (and maybe 1 or 2 minor things forgot mention above), end along these lines:

function webmailviewmodel() {      // data      var self = this;      self.folders = ['inbox', 'archive', 'sent', 'spam'];      self.chosenfolderid = ko.observable();        // behaviours          self.gotofolder = function(folder) { self.chosenfolderid(folder); };      };    ko.applybindings(new webmailviewmodel());

body { padding: 10px; }

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>    <div id="tabs" class="container">    <ul class="nav nav-tabs folders" data-bind="foreach: folders">        <li data-bind="css:{ active: $data == $root.chosenfolderid() }">          <a href="#" data-bind="text: $data, click: $root.gotofolder"></a>        </li>    </ul>  </div>