NavBar With KO

by WizKid81

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 <ul class="nav nav-tabs" data-bind="foreach: subjectAreaTypeEnum.asArray()">
                        <li data-bind="css: { active: isActive }"><a href="#" data-bind="click: clickFunction, text: name"></a></li>
                    </ul>

JavaScript

console.clear();

var vm = function () {
    var self = this;
        
    subjectAreaTypeEnum = Object.freeze({
        NONE: undefined,
        PROFITCENTER: 1,
        ORGANIZATIONALUNIT: 2,
        SISCODE: 3,
        properties: {
            undefined: {URL: undefined, displayName: "None"},
            1: {URL: "/Handlers/messagehandler.ashx?command=getProfitCenters", displayName: "Profit Center", code: "PC", genericName: "Financial"},
            2: { URL: "/Handlers/messagehandler.ashx?command=getOrganizationalUnits", displayName: "HR Org Unit", code: "OU", genericName: "HR" },
            3: { URL: "/Handlers/messagehandler.ashx?command=getSISCodes", displayName: "SIS Code", code: "SIS", genericName: "Student" }
        },
        asArray: function () {
            var returnArray = [];
            for (var key in this) {
                var property = this.properties[this[key]];
                if (property !== undefined && property.genericName !== undefined)
                {
                    var genericName = this.properties[this[key]].genericName;
                    returnArray.push({key: key, name: genericName, isActive: self.subjectAreaType() === this[key], clickFunction: function (saType) {
                        self.subjectAreaType(self.subjectAreaTypeEnum[saType.key]);
                        console.log(arguments);
                        console.log(self.subjectAreaType());
                    }});
                }
                
            }

            return returnArray;
        }
        
    });    
    
    self.subjectAreaType = ko.observable(self.subjectAreaTypeEnum.PROFITCENTER);

	self.changeSubjectArea = function() {
        console.log("changeSubject Area");
    };
}();

ko.applyBindings(vm);