mustache render example

OpenActive Dataset Site Template render example with mustache.js

by Nick Evans

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script>

JavaScript

// FOR PRODUCTION USE:
//   - DO NOT DOWNLOAD THE MUSTACHE FILE LIVE, IT MUST BE SAVED LOCALLY TO PREVENT XSS ATTACKS
//   - DO NOT RENDER THIS FILE CLIENT-SIDE, IT MUST BE RENDERED SERVER-SIDE FOR SEO
$.get('https://openactive.io/dataset-site-template/datasetsite.mustache', function ( template ) {
  $.getJSON( "https://openactive.io/dataset-site-template/example-no-booking.jsonld", function( data ) {
    // Stringify the input JSON-LD, and place the contents of the string
    // within the "jsonld" property at the root of the JSON itself.
    data.jsonld = JSON.stringify(data, null, 2);
    
    // If using the CSP compatible template, set the "stylesheetUrl" property
    // at the root of the JSON to the relative URL of your self-hosted
    // datasetsite.styles.css file.
    data.staticAssetsPathUrl = "/assets/dataset-site";

    //Use the resulting JSON with the mustache template to render the dataset site.
    var html = Mustache.render(template, data);
    document.write(html);
  });
});