dannyamey/backbone_keyevents.html

## backbone_keyevents.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Untitled</title>
<style>
#example {
  background: #f00;
  width: 300px;
  height: 300px;
}
</style>
</head>
<body>

<a href="javascript:view.remove();">remove view</a>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone.js"></script>
<script>

// Example view implementation
var ExampleView = Backbone.View.extend({
  // bind events outside of the view in initialize
  initialize: function() {
    // bind all methods to `this` scope
    _.bindAll(this);
    $(document).on('keydown', this.keydown);
    $(document).on('keyup', this.keyup);
  },
  keydown: function(event) {
    console.log('keydown');
  },
  keyup: function(event) {
    console.log('keyup');
  },
  render: function() {
    this.el.innerHTML = 'example view';
    return this;
  },
  // override remove to also unbind events
  remove: function() {
    $(document).off('keydown', this.keydown);
    $(document).off('keyup', this.keyup);
    Backbone.View.prototype.remove.call(this);
  }
});

// Initialise the view
var view = new ExampleView({ id: 'example' });
document.body.appendChild(view.render().el);

</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Untitled</title>
	<style>
	#example {
	background: #f00;
	width: 300px;
	height: 300px;
	}
	</style>
	</head>
	<body>

	<a href="javascript:view.remove();">remove view</a>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
	<script src="http://documentcloud.github.com/backbone/backbone.js"></script>
	<script>

	// Example view implementation
	var ExampleView = Backbone.View.extend({
	// bind events outside of the view in initialize
	initialize: function() {
	// bind all methods to `this` scope
	_.bindAll(this);
	$(document).on('keydown', this.keydown);
	$(document).on('keyup', this.keyup);
	},
	keydown: function(event) {
	console.log('keydown');
	},
	keyup: function(event) {
	console.log('keyup');
	},
	render: function() {
	this.el.innerHTML = 'example view';
	return this;
	},
	// override remove to also unbind events
	remove: function() {
	$(document).off('keydown', this.keydown);
	$(document).off('keyup', this.keyup);
	Backbone.View.prototype.remove.call(this);
	}
	});

	// Initialise the view
	var view = new ExampleView({ id: 'example' });
	document.body.appendChild(view.render().el);

	</script>
	</body>
	</html>