JSFiddle - React, Tailwind, and code Playground

by 20yco

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div id="view-goes-here"></div>
<div id="out"></div>

CSS

#view-goes-here {
    padding: 50px;
    border: 1px solid black;
}
#menu {
    background-color: #eee;
    padding: 10px;
}
#out p {
    margin-bottom: 10px;
}

JavaScript

var myView = Backbone.View.extend({
    events: {
        'click #menu': 'insideMenuHandler',
        'click':       'outsideMenuHandler'
    },
    
    initialize: function() {
        _.bindAll(this, 'insideMenuHandler', 'outsideMenuHandler');
    },
    
    render: function() {
        $(this.el).append('<div id="menu">this is the menu</div>');
        return this;
    },
    
    insideMenuHandler: function(e) {
        $('#out').append('<p>insideMenuHandler called.</p>');
        return false;
    },
    outsideMenuHandler: function(e) {
        $('#out').append('<p>outsideMenuHandler called.</p>');
    }
});
var v = new myView({el: '#view-goes-here'});
v.render();