brigand/events.html

## events.html
<!DOCTYPE html>
<html>
<head>
    <title>My First Knockout App</title>
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap-responsive.css"/>
    <link rel="stylesheet" type="text/css" href="assets/css/myfirstko.css" />
</head>
<body data-bind="event: {keypress: handleKeypress}">
    <div class="container-fluid">
        <div class="span6 offset3">
            <h1>My First Knockout App</h1>
            <div class="row-fluid">
                <div class="offset2 span8">
                    <button class="btn" data-bind="click: alert1">alert1</button>
                    <button class="btn" data-bind="click: alert2">alert2</button>
                    <button class="btn" data-bind="click: alert3">alert3</button>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="assets/js/knockout.js"></script>
    <script type="text/javascript" src="assets/js/myapp.js"></script>
</body>
</html>

## myapp.js
function ViewModel() {
    var self = this;

    self.handleKeypress = function(data, event){
        var char = String.fromCharCode(event.which);
        var cb = self.hotkeys[char];
        if (typeof cb === 'function')
            cb();
    };

    self.hotkeys = {
        a: function(){
            self.alert1();
        },
        s: function(){
            self.alert2();
        },
        d: function(){
            self.alert3();
        }
    };

    self.alert1 = function(){
        alert('1');
    };
    self.alert2 = function(){
        alert('2');
    };
    self.alert3 = function(){
        alert('3');
    };
}

window.app = new ViewModel();
ko.applyBindings(window.app);
	<!DOCTYPE html>
	<html>
	<head>
	<title>My First Knockout App</title>
	<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css"/>
	<link rel="stylesheet" type="text/css" href="assets/css/bootstrap-responsive.css"/>
	<link rel="stylesheet" type="text/css" href="assets/css/myfirstko.css" />
	</head>
	<body data-bind="event: {keypress: handleKeypress}">
	<div class="container-fluid">
	<div class="span6 offset3">
	<h1>My First Knockout App</h1>
	<div class="row-fluid">
	<div class="offset2 span8">
	<button class="btn" data-bind="click: alert1">alert1</button>
	<button class="btn" data-bind="click: alert2">alert2</button>
	<button class="btn" data-bind="click: alert3">alert3</button>
	</div>
	</div>
	</div>
	</div>
	<script type="text/javascript" src="assets/js/knockout.js"></script>
	<script type="text/javascript" src="assets/js/myapp.js"></script>
	</body>
	</html>
	function ViewModel() {
	var self = this;

	self.handleKeypress = function(data, event){
	var char = String.fromCharCode(event.which);
	var cb = self.hotkeys[char];
	if (typeof cb === 'function')
	cb();
	};

	self.hotkeys = {
	a: function(){
	self.alert1();
	},
	s: function(){
	self.alert2();
	},
	d: function(){
	self.alert3();
	}
	};

	self.alert1 = function(){
	alert('1');
	};
	self.alert2 = function(){
	alert('2');
	};
	self.alert3 = function(){
	alert('3');
	};
	}

	window.app = new ViewModel();
	ko.applyBindings(window.app);