JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/douglascrockford/JSON-js/master/json2.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script src="https://raw.github.com/madrobby/keymaster/master/keymaster.min.js"></script>
<script src="https://raw.github.com/bry4n/backbone-shortcuts/master/backbone.shortcuts.min.js"></script>
<div class="message"></div>
<div class="example">
<span class="btn">Click here</span> or press <b>Shift+T</b>
<br /><br />
<span class="desc">* Notes: Preview panel is not focused by default, just click this window panel anywhere to make this panel focused before you test shortcuts.</span>
</div>
CSS
body { padding: 20px; }
.example, .message { padding: 20px; }
.btn {
border: 1px solid #888;
padding: 5px;
background-color: #eee;
cursor: pointer;
}
.desc {
color: #aaa;
font-size: 14px;
}
JavaScript
var App;
App = {
init: function() {
new App.View;
}
}
App.View = Backbone.View.extend({
el: '.example',
events: {
'click .btn': 'testMessageClick'
},
shortcuts: {
'ctrl+v': 'testMessageKey'
},
initialize: function() {
_.extend(this, new Backbone.Shortcuts);
this.delegateShortcuts();
},
testMessageClick: function() {
$('.message').append("Hello from Click<br />");
},
testMessageKey: function() {
$('.message').append("Hello from Shift+T<br />");
}
});
App.init();