Minimal HandlebarsJS Demo
Last active
October 30, 2023 22:30
-
-
Save hugolpz/8075193 to your computer and use it in GitHub Desktop.
Minimal HandlebarsJS Demo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { "people": | |
| [ | |
| { | |
| "family": "Lopez", | |
| "name": "Hugo", | |
| "title": "leader", | |
| "place": "Paris (France)", | |
| "introduction": "WP:Map workshop's Dino, GIS, Gdal & D3js lightener", | |
| "photo": "WikiAtlas_Lopez_Hugo_Yug.png", | |
| "twitter": "http://www.twitter.com/Hugo_lz" | |
| }, | |
| { | |
| "family": "Ganesh", | |
| "name": "Arun", | |
| "title": "co-leader", | |
| "place": "Dharamsala (India)", | |
| "introduction": "GIS, D3js enthusiast, interactions designers & wikidata tinker", | |
| "photo": "WikiAtlas_Ganesh_Arun_Planemad.jpg", | |
| "twitter": "http://www.twitter.com/planemad" | |
| }, | |
| { | |
| "family": "Lopez", | |
| "name": "Edouard", | |
| "title": "Hero", | |
| "place": "Bordeaux (France)", | |
| "introduction": "Backend admin & Frontend professional webdev, scripts & stack consulting", | |
| "photo": "WikiAtlas_Lopez_Edouard_Lyhana8.png", | |
| "twitter": "http://wwww.twitter.com/edouard_lopez" | |
| } | |
| ] | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Concise Handlebars.js</title> | |
| <!-- 0a. CSS --> | |
| <link rel="stylesheet" href="style.css"> | |
| <!-- 0a. JS: JQuery.js & Handlebars.js libraries --> | |
| <script src="//code.jquery.com/jquery-2.0.3.min.js"></script><!-- online --> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script><!-- online --> | |
| </head> | |
| <body> | |
| <!-- 1. page content with anchor --> | |
| <div id="anchor">Anchor is this div.</div> | |
| <!-- 2. HTML-Mustache template --> | |
| <script id="tpl" type="text/template"> <!-- Basic Handlebars templates are similar to Mustache templates --> | |
| {{#people}} | |
| <div><img src="{{photo}}"><b><a href="{{twitter}}">{{family}} {{name}}</a></b> — {{title}}, {{place}} : {{introduction}}.</div> | |
| {{/people}} | |
| </script> | |
| <!--3. Data.json's url --> | |
| <script> | |
| var url='data.json'; // relative url : 'data.json'; protocole-relative absolute url: '//website.org/path/to/data.json'; | |
| </script> | |
| <!--4. JQuery/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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| img { width:200px; } | |
| a { | |
| color: #0084b4; | |
| text-decoration:none; | |
| } | |
| a:hover { text-decoration : underline; } | |
| div#anchor { width: 230px; } | |
| div#anchor:hover { | |
| padding: 12px; /* padding + border = 16px */ | |
| border: 4px solid #ddd; | |
| } | |
| div { | |
| display: block; /* or inline-block */ | |
| overflow: hidden; | |
| /*height: 200px; */ | |
| width: 200px; | |
| margin: 3px; | |
| padding: 15px; /* padding + border = 16px */ | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| text-decoration: none; | |
| background: #fff; | |
| color: #333; | |
| } | |
| div:hover { | |
| padding: 12px; /* padding + border = 16px */ | |
| border: 4px solid #0084b4; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment