Minimal HandlebarsJS demo within a minimal HTML5 page.
Handlebars.js is a convenient, easy to learn JS templating system.
Mustache.js already provided a super-basic templating {{syntaxe}} on purpose restricted to structure only, aka logic-less templating. Handlebars.js build on it, offering the same basic levels, which can later on be push toward logical, conditional behaviors which the later also provide.
| == How to use Templating System: Handlebars.js | |
| === Why Handlebars.js | |
| <b>Mustache.js</b> HTML templating system have been designed to stays extremly simple. As such, it excludes logical operators (IF) and alikes. | |
| <b>Handlebars.js</b> HTML templates are based on Mustache.js, so you can start little and simple. Handlebars.js also have logical and advanced operators so you can later build more complex and conditional stuffs. The documentations with just be longer to read. | |
| In this page, we will cover the basics of Handlebars.js. | |
| </h3>Minimal HTML5-MustacheJS : index.html</h3> | |
| <h3>Minimal HTML5/HandlebarsJS file</h3> | |
| index.html | |
| <h3>Minimal JSON: data.json</h3> | |
| data.json | |
| <h3>Sources:</h3> | |
| * <a href="http://iviewsource.com/codingtutorials/introduction-to-javascript-templating-with-mustache-js/">Introduction to JavaScript Templating [video tutorial] with Mustache.js</a> | |
| * <a href="http://cdnjs.com">CDNjs.com</a> | |
| * <a href="http://www.paulirish.com/2010/the-protocol-relative-url/">The Protocol-relative URL</a> | |
| * <a href="http://iviewsource.com/codingtutorials/getting-started-with-javascript-object-notation-json-for-absolute-beginners/">A JSON Tutorial. Getting started with JSON using JavaScript and jQuery</a> | |
| NEXT: | |
| http://h5bp.github.io/ | |
| http://jsfiddle.net/YGwJ9/1/ |
| { "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" | |
| } | |
| ] | |
| } |
| <!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> |
| 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; | |
| } |
