knockout Multipanel Nav

by bradleytrager

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>
<div class="container">
    <div class="row">
        <div class="span6">
            <ul data-bind="foreach:views">
                <li data-bind="css: {active: $root.currentView() == $data}"> <a data-bind="text:$data, attr:{href:'#' + $data}, click:$root.changeView"></a>

                </li>
            </ul>
        </div>
        <div class="span6">
            <ul data-bind="foreach:subviews">
                <li> <span data-bind="text:$data"></span>

                </li>
            </ul>
        </div>
    </div>
</div>

JavaScript

function viewModel() {
    var self = this;
    self.currentView = ko.observable("Home");
    self.subviews = ko.computed(function(){
        switch (self.currentView()){
            case "Home":
                return home;
            case "About":
                return about;
            case "Contact":
                return contact;
        }
    });
    self.views = ko.observableArray(["Home", "About", "Contact"]);
    self.changeView = function (data) {
        self.currentView(data);
    };

}
var home = ["home1", "home2", "home3"];
var about = ["about1", "about2", "about3"];
var contact = ["contact1", "contact2", "contact3"];
var vm = new viewModel();


ko.applyBindings(vm);