JSFiddle - React, Tailwind, and code Playground

by mitemitreski

HTML

<script src="https://raw.github.com/janl/mustache.js/master/mustache.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Mustache JS examples</title>
    <!-- vendor js -->
    <script src="https://raw.github.com/janl/mustache.js/master/mustache.js"></script>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <!-- app code-->
    <script src="example.js"></script>
    <script id="book-template" type="text/x-mustache-template">
      <div class="book-box">
      <h3>{{title}}</h3>
      <span> is awesome book get it on <a href="{{associateUrl}}">Amazon</a> </span>
      </div>
    </script>
    <script id="book-template-full" type="text/x-mustache-template">
      <div class="book-box">
      <h3>{{title}} by {{author.name}}</h3>
      <p> is awesome book get it on <a href="{{associateUrl}}">Amazon</a> </p>
      <p>{{#haveInStock}} Is available get one now {{/haveInStock}} </p>
      <ul>
      {{#similarBooks}}
        <li>{{title}}</li>
      {{/similarBooks}}
      </ul>
       <ol>
      {{#comments}}
        <li>{{comment}}</li>
      {{/comments}}
      {{^comments}}
        <li>No comments add one</li>
      {{/comments}}
      </ol>
      </div>
    </script>
  </head>
  <body>
    <div id="content-mustache-full">
      None
    </div>
      <hr/>
    <div id="content-mustache">
      None
    </div>
      <hr/>
    <div id="content-jquery">
      None
    </div>
  </body>
</html>

JavaScript

var book = {
  id : 12,
  title : "A Game of Thrones",
  url : "http://www.amazon.com/gp/product/0553573403/",
  amazonId : "mitemitreskic-20",
  associateUrl : function() {
    return this.url + '?tag=' + this.amazonId;
  },
  author : {
    name : 'George R. R. Martin',
    imdbUrl : 'http://www.imdb.com/name/nm0552333/',
    wikiUrl : 'https://en.wikipedia.org/wiki/George_R._R._Martin'
  },
  haveInStock : true,
  similarBooks : [{
    id : 13,
    title : "Decision Points"
  }, {
    id : 13,
    title : "Spoken from the Heart"
  }],
  comments : []
};

jQuery(document).ready(function() {
  var template = jQuery('#book-template-full').html();
  var renderedData = Mustache.render(template, book);
  jQuery('#content-mustache-full').html(renderedData);
});

jQuery(document).ready(function() {
  var template = jQuery('#book-template').html();
  var renderedData = Mustache.render(template, book);
  jQuery('#content-mustache').html(renderedData);
});

jQuery(document).ready(function() {
  var out = '<div class="book-box"><h3>' + book.title + '</h3><span> is awesome book get it on <a href="' + book.associateUrl() + '">Amazon</a></span></div>';
  jQuery('#content-jquery').html(out);
});