Bootstrap & Knockout Bindings

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<ol class="breadcrumb">
  <li data-bind="if:isInMode1()">
      <a href="#">Mode 1</a>
  </li>
  <li class="active" data-bind="ifnot:isInMode1()">Mode 1</li>
  <li data-bind="if:isInMode2()">
    <a href="#">Mode 2</a>
  </li>
  <li class="active" data-bind="ifnot:isInMode2()">Mode 2</li>
</ol>

CSS

.linker {
  margin-bottom: 15px;
  margin-top: 15px;
  list-style: none;
}

.linker > li {
  display: inline-block;
}

/*Old pseudo element solution*/
.linker > li + li:before {

}
/*New span solution*/
.linker > span + span:after {
    padding: 0 5px;
}

.linker > .active {
  color: #999999;
}

JavaScript

function ViewModel() {
    var self = this;
    self.chosenMode =  ko.observable("Mode 1");
    self.mode = ko.observableArray();
    
    //TEST: push data simulation
    mode.push("Mode 1");
    
    //Helpers
    self.isInMode1 = function() {
        return self.chosenMode() == "Mode 1";     
    }
    
    self.isInMode2 = function() {
        return self.chosenMode() == "Mode 2";     
    }
    
}//End ViewModel

ko.applyBindings(new ViewModel());