Knockout Click Binding

by mrrodd

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<h1>Employees</h1>
<ul data-bind="foreach: employees">
    <li>
        <span data-bind="text: name"></span>
        <button data-bind="click: $parent.clickedOnEmployee">show</button>
    </li>
</ul>

JavaScript

var employeesJSON = '[{"name":"Bill Gates"},{"name":"Steve Jobs"},{"name":"Jeff Foxworthy"}]';

var my = {}; // namespace for us to use, will contain vm

function EmployeeViewModel() {
    var self = this;
    
    self.employees = ko.observableArray([]);
    
    self.loadEmployees = function() {
        ko.mapping.fromJSON(employeesJSON, {}, self.employees);
    };
                                   
    self.clickedOnEmployee = function(employee) {
        alert('You clicked on ' + employee.name());
    };

    self.loadEmployees();
}

$(document).ready(function() {
    my.vm = new EmployeeViewModel();
    ko.applyBindings(my.vm);
});