URL Routing

Simple URL Routing with knockout.js and 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:views">
    <li data-bind="css: {active: $root.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: currentView()}"></div>
        </div>
    </div>
</div>

<script type="text/html" id="Home">
    <div>
    <h2>Home</h2>
    </div>
</script>
<script type="text/html" id="About">
    <div>
    <h2>About</h2>    
    </div>
</script>
<script type="text/html" id="Contact">
     <div>
    <h2>Contact</h2>
    </div>
</script>

JavaScript

function viewModel() {
		//Data
    var self = this;
    self.views = ["Home", "About", "Contact"];
    self.currentView = ko.observable();
    
    //Routing
    function navigate(){
    	fragmentId = location.hash.substr(1);
      self.currentView(fragmentId);
    }
    
    function loadhash(){
    	if(!location.hash){
    		location.hash = '#Home'
        
    	}
    
    }
    window.addEventListener('hashchange', navigate);
    window.addEventListener('load', loadhash());

}

ko.applyBindings(new viewModel());