使用bootstrap和kickout.js显示选项卡

Question

I am trying to show tabs with Bootstrap.

With this 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 is the problem with my code?

Answer 1

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

• The markup you've posted is invalid: there's a stray a tag that is not closed.
• The markup you've posted is invalid: there's an ul that's a direct descendant of the first ul , you probably want just one.
• Why would there be two a tags inside one tab li ? You only want one.
• You have both content for the li and a text binding (which will overwrite the content). Bootstrap requires the a so you should move the binding to that element I'd think.
• The click binding should probably be on the a tag, not the li .
• You render a selected class for active li items, but if you look at the Bootstrap documentation you'll see that it should be active .
• You mix data-* attributes from Bootstrap (ie data-toggle ) with a Knockout way of selecting tabs ( click and css bindings). You probably only want the latter

After fixing all of those (and maybe one or two minor things I forgot to mention above), you end up with something 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> 

Answer 2

After correcting all the mistakes Jeroen pointed out, there is one little improvement left to make:

 function WebmailViewModel() { var self = this; self.folders = [ {id: '#inbox', name: 'Inbox'}, {id: '#archive', name: 'Archive'}, {id: '#sent', name: 'Sent'}, {id: '#spam', name: 'Spam'} ]; self.chosenFolder = ko.observable(self.folders[0]); } $(function () { ko.applyBindings(new WebmailViewModel()); }); 

 <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script> <div id="tabs" class="container"> <ul class="nav nav-tabs" role="tablist" data-bind="foreach: folders"> <li data-bind=" click: $root.chosenFolder, css: { active: $data === $root.chosenFolder() } "> <a href="" role="tab" data-toggle="tab" data-bind=" text: name, attr: {href: id} "></a> </li> </ul> <div>Tab content here</div> </div> 

Note that observables are themselves functions. If you want to store a clicked object in an observable you can assign that observable as the click handler directly.

When a click event occurs, knockout will call the event handler and pass the clicked object as the first argument, which conveniently exactly is the way you set an observable's value in knockout.