JSFiddle - React, Tailwind, and code Playground

by 3gwebtrain

HTML

<!-- scripts -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://underscorejs.org/underscore-min.js"></script>
    <script src="http://backbonejs.org/backbone-min.js"></script>
    <script src="http://marionettejs.com/downloads/backbone.marionette.min.js"></script>
    <script src="index.js"></script>

    <!-- style sheets -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

    <!-- templates -->
    <script id="layout-template" type="text/html">
      <div class="container">
        <div class="header"></div>
        <br>
        <div class="content"></div>
      </div>
    </script>

    <script id="header-template" type="text/html">
      <ul class="nav nav-pills pull-right">
        <li><a href="javascript:;" class="home">Home</a></li>
        <li><a href="javascript:;" class="about">About</a></li>
      </ul>
      <h3 class="text-muted">Project name</h3>
    </script>

    <script id="home-template" type="text/html">
      <div class="jumbotron">
        <h1>Jumbotron heading</h1>
        <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn btn-lg btn-success" href="#">Sign up today</a></p>
      </div>
    </script>

    <script id="about-template" type="text/html">
      <div class="row marketing">
        <div class="col-lg-6">
          <h4>Subheading</h4>
          <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

          <h4>Subheading</h4>
          <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

          <h4>Subheading</h4>
          <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
        </div>

        <div...

JavaScript

// Layout
var Layout = Backbone.Marionette.Layout.extend({
  template: '#layout-template',
  // define regions
  regions: {
    header: '.header',
    content: '.content'
  }
});

var layout = new Layout();

// Home view
var Home = Backbone.Marionette.ItemView.extend({
  template: '#home-template',
});

// About view
var About = Backbone.Marionette.ItemView.extend({
  template: '#about-template',
});

// Header view
var Header = Backbone.Marionette.ItemView.extend({
  template: '#header-template',
  // bind DOM events
  events: {
    'click .home': 'home',
    'click .about': 'about',
  },
  home: function(){
    // show Home View in the content region
    layout.content.show(new Home());
  },
  about: function(){
    // show About View in the content region
    layout.content.show(new About());
  }
});



$(function() {
  // Render and append the layout
  $('body').append(layout.render().el);
  // Show inner view
  layout.header.show(new Header());
  layout.content.show(new Home());
});