JSFiddle - React, Tailwind, and code Playground

by bry4n

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;
}
.desc {
    color: #aaa;
    font-size: 14px;
}

CoffeeScript

App =
  init: ->
    new App.View

class App.View extends Backbone.View
    
    el: '.example'
    
    events:
      'click .btn' : 'testMessageClick'
    
    shortcuts:
      'shift+t' : 'testMessageKey'
    
    initialize: ->
      _.extend @, new Backbone.Shortcuts
      @delegateShortcuts()
      
    testMessageClick: ->
      $('.message').append("Hello from Click <br />");
      
    testMessageKey: ->
      $('.message').append("Hello from Shift+T <br />");
 
App.init()