JSFiddle - React, Tailwind, and code Playground

by dkrotts

HTML

<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<h1>Welcome</h1>

<!-- Simple view template -->
<div class="home-container"></div>
<script type="text/template" id="home-template">
    <div class="home-container">
        <h2><%= title %></h2>
        <button class="btn">Click Me</button>
    </div>
</script>
            
<!-- Another view template -->
<div class="reports-container"></div>
<script type="text/template" id="reports-template">
    <div class="home-container">
        <h2><%= title %></h2>        
    </div>
</script>

JavaScript

var HomeView = Backbone.View.extend({
    initialize: function() {
        this.render();
    },
    render: function() {
        var template = _.template($("#home-template").html(), { title: 'Home Page' });
        this.el.html(template);
    },
    events: {
        'click .btn': 'handleBtnClick'           
    },
    handleBtnClick: function() {
        alert('Button clicked.');           
    }
});

var myView = new HomeView({ el: $('.home-container') });