Knockout - Nested List selection with LI

by johnpapa

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<ul data-bind="foreach: campuses">
    <li><span data-bind="text:name, click:$parent.selectCampus, css: {selected: isSelected}"></span></li>
</ul>

<!-- ko with: selectedCampus -->
<span data-bind="text:name"></span>
<!-- /ko -->

CSS

ul 
{
        list-style-type: none;
        padding-left: 0px;
}
/*
li{
    border: 1px solid black;
    width: 150px;
}
*/
ul li span{
    cursor: pointer;
    width:100%;
    display:inline-block;    
}

.selected { 
    background-color: yellow; 
    width:150px;
    color:red;
}

JavaScript

var my = my || {};

var Campus = function(code, name, selected){
    var self = this;
    self.code = code;
    self.name = name;
    self.isSelected = ko.computed(function() {
        return selected() === this;
    }, this);
};

my.CampusViewModel= function() {
    var 
        selectedCampus = ko.observable(),
        selectedLocation = ko.observable(),
        campuses = [
            new Campus("WDWPR", "Walt Disney World", selectedCampus),
            new Campus("DLR", "Disneyland", selectedCampus)
        ],
        locations = [
            {campusCode:"WDWPR",code:"EPCOT",name:"EPCOT"},
            {campusCode:"WDWPR",code:"MK",name:"Magic Kingdom"},
            {campusCode:"WDWPR",code:"DAK",name:"Disney's Animal Kingdom"},
            {campusCode:"WDWPR",code:"DHS",name:"Disney's Hollywood Studios"}
        ],
        selectCampus= function(){
            selectedCampus(this);
        };
        /*
        onChange = function(arg) {
            var selected = $.map(this.select(), function (item) {
                selectedLocation = locations[$(item)[0].rowIndex - 1];
            });
            loadTargets();
        };   
        */
    return {
        campuses : campuses,
        locations : locations,
        selectedCampus : selectedCampus,
        selectedLocation : selectedLocation,
        selectCampus: selectCampus
    };
};
        

my.vm = new my.CampusViewModel();
ko.applyBindings(my.vm);