M/M

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.marionette/1.5.1-bundled/backbone.marionette.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/elevatezoom/3.0.8/jquery.elevatezoom.min.js"></script>
<!-- ==========================
     PRODUCT DETAIL
=========================== -->
<script type="text/template" id="product-detail">
    <div class="container-fluid">
  <div class="row content">  
    <div class="col-sm-6">
      <img id="zoomy" src="https://is4.revolveassets.com/images/p/fw/z/PLSF-WD1_V1.jpg" width="500px"></img>
    </div>
    <div class="col-sm-6 sidenav">
      <h3 class="times"><i>{{brand}}</i></h3>
      <h4> {{name}}</h4>
      <p>{{description}}</p>
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#section1">Color</a></li>
        <li><a href="#section2">Size</a></li>
        <li><a href="#section3">Quantity</a></li>
      </ul>
    </div>
  </div>
</div>
       
</script>

<!-- ==========================
     SHIPPING ADDRESS FORM
=========================== -->
<script type="text/template" id="shipping-address-form">
<form class="form-horizontal">
<fieldset>

<!-- Form Name -->
<legend>Shipping Address</legend>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="first-name">First Name</label>  
  <div...

CSS

small {
    font-size: 80%;
    display: block;
}
body {
    font: normal 15px/1.2em Helvetiva,Arial,Sans-serif;
    color: #666;
    background-color: #fff;
    padding: 20px
}

* {
    margin: 0;
    padding: 0;
    outline: 0;
}

legend, .control-label {
    padding-bottom: 6px;
}

/* PRODUCT DETAIL */

/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
.row.content {height: 800px}
    
/* Set gray background color and 100% height */
.sidenav {    
    height: 100%;
    border-radius: 5px;
    background-color: #fcf8e3;
}
.times {
  font-family: "Times New Roman";
  font-style: italic;
}

/* Set black background color, white text and some padding */
footer {    
    color: white;
    padding: 15px;
    background-color: #555;
}
    
/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
    .sidenav {
        height: auto;
        padding: 15px;
    }
    .row.content {height: auto;} 
}

JavaScript

/* ===========================
   FIDDLE DEBUG HELPERS / VARS
   =========================== */

var loadCount = 0;
var loadActions = 0;

var updateLoadActions = function (count) {
    $('#views-added span').html(count);
}

var updateLoadCount = function (count) {
    $('#load-count span').html(count);
}

/* ====================
   MARIONETTE OVERRIDES
   ==================== */

// This just adds some debug output, you can safely ignore this bit.
Marionette.TemplateCache.prototype.loadTemplate = function (templateId) {
    // debug only: ignore
    updateLoadCount(++loadCount);

    // Semi-implement original function (removed error handling for brevity)
    var template = Marionette.$(templateId).html();
    return template;
}
Marionette.TemplateCache.prototype.compileTemplate = function (rawTemplate) {

    // Mustache.parse will not return anything useful (returns an array)
    // The render function from Marionette.Renderer.render expects a function
    // so instead pass a partial of Mustache.render 
    // with rawTemplate as the initial parameter.

    // Additionally Mustache.compile no longer exists so we must use parse.
    Mustache.parse(rawTemplate);
    return _.partial(Mustache.render, rawTemplate);
};

/* ===================== 
   PRODUCT CHECKOUT FLOW
   ===================== */

var ProductDetail = Marionette.ItemView.extend({
    template: "#product-detail"
});

var ShippingAddress = Marionette.ItemView.extend({
    template: "#shipping-address-form"
});

var App = new Marionette.Application();

App.addRegions({
    view1: '#view1',
    view2: '#view2',
    view3: '#view3',
});

App.addInitializer(function () {
    var product, shippingAddr, model3;

    // refresh the template on screen a few times to prove 
    // the cache only calls load on the template once

    product = new Backbone.Model({
        brand: 'Gucci',
        name: 'Peruvian Sun Dress',
        description: 'Be the life of the yacht party in this sleek, cosmopolitan sun...