JSFiddle - React, Tailwind, and code Playground

by Ozren Tkalčec Krznarić

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/1.8.0/backbone.marionette.js"></script>
    <header id="header"></header>
    <section id="main"></section>
    <footer id="footer"></footer>
    <script src="lib\jquery.min.js"></script>
    <script src="lib\underscore-min.js"></script>
    <script src="lib\backbone-min.js"></script>
    <script src="lib\backbone.marionette.js"></script>

    <script type="text/html" id="headerTemplate">
        <h1>Contact Manager</h1>
        <hr/>
    </script>
    
    <script type="text/html" id="footerTemplate">
        <hr/>
    </script>
    
    <script type="text/html" id="my-view-template">
        <div class="row">
            <label>First Name:</label>
            <span><%= firstName %></span>
        </div>
        <div class="row">
            <label>Last Name:</label>
            <span><%= lastName %></span>
        </div>
        <div class="row">
            <label>Email:</label>
            <span><%= email %></span>
        </div>
    </script>

JavaScript

//Create an application object
var application = new Marionette.Application();

//Add regions to the appplication.
//Shortcut for creating region objects.
application.addRegions({
    header: "#header",
    main: "#main",
    footer: "#footer",
});

//Define the view
var MyView = Marionette.ItemView.extend({
    template: '#my-view-template',
});

var HeaderView = Marionette.ItemView.extend({
    template: "#headerTemplate"
});

var FooterView = Marionette.ItemView.extend({
    template: "#footerTemplate"
});

//Define the model
var Person = Backbone.Model.extend({
    defaults:{
        firstName: "Homer",
        lastName: "Simpson",
        email: "[email protected]"
    }
});

//Create person instance.
var person1 = new Person({
    firstName: "Bart",
    lastName: "Simpson",
    email: "[email protected]"
});

//Instantiate the view.
var myView = new MyView({
    model: person1
});

var headerView = new HeaderView();

var footerView = new FooterView();

//Show the view in the region specified.
//Application.Region.Show(myView)
application.header.show(headerView);
application.main.show(myView);
application.footer.show(footerView);