diff --git a/README.md b/README.md index 1ce26d2..43c725f 100644 --- a/README.md +++ b/README.md @@ -137,38 +137,42 @@ There are several techniques that can be used to load templates and hand them to #### Include Templates -If you need a template for a dynamic part in a static website, you can consider including the template in the static HTML file to avoid loading templates separately. Here's a small example using `jQuery`: +If you need a template for a dynamic part in a static website, you can consider including the template in the static HTML file to avoid loading templates separately. Here's a small example: + +```js +// file: render.js + +function renderHello() { + var template = document.getElementById('template').innerHTML; + var rendered = Mustache.render(template, { name: 'Luke' }); + document.getElementById('target').innerHTML = rendered; +} +``` ```html - - -
Loading...
- - + +
Loading...
+ + + + + ``` -```js -function loadUser() { - var template = $('#template').html(); - Mustache.parse(template); // optional, speeds up future uses - var rendered = Mustache.render(template, {name: "Luke"}); - $('#target').html(rendered); -} -``` - #### Load External Templates -If your templates reside in individual files, you can load them asynchronously and render them when they arrive. Another example using `jQuery`: +If your templates reside in individual files, you can load them asynchronously and render them when they arrive. Another example using [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch): ```js -function loadUser() { - $.get('template.mst', function(template) { - var rendered = Mustache.render(template, {name: "Luke"}); - $('#target').html(rendered); +function renderHello() { + fetch('template.mustache').then(function (template) { + var template = document.getElementById('template').innerHTML; + var rendered = Mustache.render(template, { name: 'Luke' }); + document.getElementById('target').innerHTML = rendered; }); } ```