Knockout.js with Sammy.js

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/sammy.js/0.7.4/sammy.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<ul class="nav nav-pills" data-bind="foreach:Main.views">
    <li data-bind="css: {active: $root.Main.currentView() == $data}"> <a  data-bind="text:$data, attr:{href:'#' + $data}"></a>
    </li>
</ul>

<div class="container">
    <div class="row">
        <div class="span12">
            <div data-bind="template: {name: Main.currentView()}"></div>
        </div>
    </div>
</div>

<script type="text/html" id="Home">
    <div data-bind="with:Home">
    <h2 data-bind="text:name"></h2>
    </div>
</script>
<script type="text/html" id="About">
    <div data-bind="with:About">
    <h2 data-bind="text:name"></h2>
    </div>
</script>
<script type="text/html" id="Contact">
      <div data-bind="with:Contact">
    <h2 data-bind="text:name"></h2>
    </div>
</script>

JavaScript

function viewModel() {
    var self = this;
    self.currentView = ko.observable();
    self.views = ko.observableArray(["Home", "About", "Contact"]);
}
function homeViewModel() {
    var self = this;
    self.name = 'Home';
}
function aboutViewModel() {
    var self = this;
    self.name = 'About';
}
function contactViewModel() {
    var self = this;
    self.name = 'Contact';
}
var vm = {
    Main: new viewModel(),
    Home: new homeViewModel(),
    About: new aboutViewModel(),
    Contact: new contactViewModel
};

 
ko.applyBindings(vm);
Sammy(function () {
        this.get('#:view', function () {
            vm.Main.currentView(this.params.view);
        });
    }).run('#Home');