JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script src="https://raw.github.com/marionettejs/backbone.marionette/master/lib/backbone.marionette.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<script type="text/template" id="map-template">
</script>
<script type="text/template" id="main-template">
<div id="map-container"></div>
</script>
<script type="text/template" id="layout">
<div id="main"></div>
</script>
<a href="#" onclick="controller.doMain(); this.innerHTML = 'Click again to watch it fail.'; return false;">Click to load map</a>
<div id="content"></div>
CSS
#map {
width: 400px;
height: 400px;
}
JavaScript
App = new Marionette.Application();
App.MapView = Marionette.ItemView.extend({
template: '#map-template',
id: 'map'
});
App.MainView = Marionette.CompositeView.extend({
template: '#main-template',
ui: {
mapContainer: '#map-container'
},
onRender: function() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapView = new App.MapView();
var map = new google.maps.Map(mapView.el, mapOptions);
mapView.render();
this.ui.mapContainer.html(mapView.el);
}
});
App.Layout = Marionette.Layout.extend({
template: "#layout",
regions: {
main: "#main",
}
});
App.Controller = Marionette.Controller.extend({
initialize: function() {
var container = new Marionette.Region({el: "#content"});
layout = new App.Layout();
container.show(layout);
},
doMain: function() {
layout.main.show(new App.MainView());
}
});
controller = null;
App.addInitializer(function(options){
controller = new App.Controller();
});
App.start();