function viewModel() { var self = this; self.currentView = ko.observable(); self.views = ko.observableArray(["Home", "About", "Contact"]); } var vm = new viewModel(); ko.applyBindings(vm); Sammy(function () { this.get('#:view', function () { vm.currentView(this.params.view); }); }).run('#Home');
<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>