Q:

Adding an onclick event a list item in KnockoutJS. 

I'm having an issue with binding an onclick event to a ul list.   Here is my html:
<ul id="burgerist" data-bind="foreach: burgerList.sort(function (l, r) { return l.name() > r.name() ?  1 : -1 }), click: showmap">
                        <li data-bind=" text: name"></li>
                    </ul>

The problem I'm having is on the showmap function.  I'm trying to return the name in an alert box:
var ViewModel = function() {
    var self = this;

    this.burgerList = ko.observableArray([]);

    initialBurgerJoints.forEach(function(burgerItem){
        self.burgerList.push( new BurgerJoint(burgerItem) );        
        addmarker(burgerItem.lat, burgerItem.long, burgerItem.name, burgerItem.comments);
    });

    self.showmap = function(data) {
        alert(this.name);
    };      
}

Can someone tell me what I'm doing wrong? 

A:

The click binding needs to be on each item in the list instead of on the list itself.  The function will be passed the current context which in this case would be a burger in burgerList. 
<ul data-bind="foreach: burgerList.sort(function (l, r) { return l.name() > r.name() ?  1 : -1 })">
    <li data-bind="text: name, click: $component.showmap"></li>
</ul>

this.showmap = function(burger) {
    alert(burger.name());
}; 

