xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Concise Handlebars.js</title> <!-- 0a. CSS --> <link rel="stylesheet" href="style.css"> <!-- 0a. JS --> <script src="//code.jquery.com/jquery-2.0.3.min.js"></script><!-- online jquery.js --> <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script><!-- online handlebars.js--> </head> <body> <!--1. Data (json format!) --> <script> var url='data.json'; // relative url : 'data.json'; protocole-relative absolute url: '//website.org/path/to/data.json'; </script> <!-- 2. Anchor --><div class="wrapper" id="anchor"> </div> <!-- 3. Template --> <script id="tpl" type="text/template"> {{#stickers}} <div class="sticker {{tag}}"> <h3><a href="{{url}}">{{title}}</a> ({{pages}}p)</h3> <p>{{intro}}</p><br /> <p class="mini">for {{ask_by}} & all, by {{post_by}}</p> </div> {{/stickers}} </script> <!--4. Handlebars.js slingshot --> <script> //4a.function creation var slingshot = function (url, tplId, anchor) { $.getJSON(url, function(data) { var template = $(tplId).html(); var stone = Handlebars.compile(template)(data); $(anchor).append(stone); }); } //4b.function firing slingshot('data.json', '#tpl', '#anchor'); // since url = 'data.json' , we can use both notations. </script> </body></html> https://code.jquery.com/jquery-2.0.3.min.js
https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js