Mustache with Marionette.js

by RC Hunter

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>
<script type="text/template" id="product-detail">

    <div class="container-fluid">
  <div class="row content">
    <div class="col-sm-4 sidenav">
      <h4>Gucci Sun Dress</h4>
      <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 class="col-sm-8">
      <img id="zoomy" src="https://is4.revolveassets.com/images/p/fw/z/PLSF-WD1_V1.jpg" width="500px"></img>
    </div>
  </div>
</div>
       
</script>

<script type="text/template" id="sample-template">
<form>
    <fieldset class="size-selection">
      <label for="form-name">Size selection</label>
      <div class="form-check form-check-inline">
  <label class="form-check-label">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="2S"> Small
  </label>
</div>
<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2"...

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 {
      background-color: #f1f1f1;
      height: 100%;
    }
    
    /* Set black background color, white text and some padding */
    footer {
      background-color: #555;
      color: white;
      padding: 15px;
    }
    
    /* 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

/* ====================
   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);
};

/* ================ 
   DEMO APPLICATION
   ================ */

var SampleView = Marionette.ItemView.extend({
    template: "#product-detail"
});
var SampleView2 = Marionette.ItemView.extend({
    template: "#sample-template"
});
var SampleView3 = Marionette.ItemView.extend({
    template: "#shipping-address-form"
});

var App = new Marionette.Application();

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

App.addInitializer(function () {
    var model, model2, model3;

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

    model = new Backbone.Model({
        brand: 'Gucci',
        name: 'Peruvian Sun Dress',
        description: 'Dress',
        imgUrl: 'https://is4.revolveassets.com/images/p/fw/z/PLSF-WD1_V1.jpg'
    });
    model2 = new Backbone.Model({
        name: 'Smiley'
    });
    model3 = new Backbone.Model({
        name: 'Baldy'
    });
    
    

    App.view1.show(new SampleView({model: model}));

    // debug only: ignore
   ...