JSFiddle - React, Tailwind, and code Playground

by miphe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.4.3/backbone.marionette.min.js"></script>
<main></main>

<script type="text/html" id="layout-view">
    <section class="s1"></section>
    <section class="s2"></section>
</script>

JavaScript

var App = Mn.Application.extend({});

// APP
App = new App({
  start: function() {
    App.routr = new App.Routr();
  	Backbone.history.start();
  }
});

App.Rm = new Mn.RegionManager({
  regions: {
    main: 'main'
  }
});

// VIEWS
App.View = {};
App.View.MyLayoutView = Mn.LayoutView.extend({
  template: '#layout-view',
  regions: {
    'section-1': 'section:first',
    'section-2': 'section:nth-child(2)'
    //'section-1': '.s1',
    //'section-2': '.s2'
  }
});

App.View.MyItemView = Mn.ItemView.extend({
  template: _.template('ItemView content: <%- some %>')
});

// MODEL
App.Model = {};
App.Model.GeneralModel = Backbone.Model.extend({});

// CONTROLLER
App.Ctrl = {
  index: function() {
    var layoutViewInstance = new App.View.MyLayoutView();
    var itemOne = new App.View.MyItemView({
      model: new App.Model.GeneralModel({
      	some: 'First view!'
      })
    });
    var itemTwo = new App.View.MyItemView({
      model: new App.Model.GeneralModel({
      	some: 'Second view!'
      })
    });
    
    App.Rm.get('main').show(layoutViewInstance);
    layoutViewInstance.getRegion('section-1').show(itemOne);
    layoutViewInstance.getRegion('section-2').show(itemTwo);
  }
};

// ROUTER
App.Routr = Mn.AppRouter.extend({
  controller: App.Ctrl,
  appRoutes: {
    '*path': 'index'
  }
});

App.start()