JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://github.com/downloads/rniemeyer/knockout-sortable/knockout-sortable.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<ul class="nav nav-tabs">
<!-- ko foreach: names -->
<li>
<a href="#">
<span data-bind="text: $data">
</span>
</a>
</li>
<!-- /ko -->
<li>
<button class="btn">
<i class="icon-plus"></i>
</button>
</li>
</ul>
JavaScript
var PeopleViewModel = (function() {
function PeopleViewModel() {
var _this = this;
this.names = ko.observableArray([]);
this.addName = function(name){ _this.names.push(name) };
}
return PeopleViewModel;
})();
var vm = new PeopleViewModel();
vm.addName("Tom");
vm.addName("Dick");
vm.addName("Harry");
ko.applyBindings(vm);