From 185fd6be94bc4e9bd9f795c29fc4250fc83c04c8 Mon Sep 17 00:00:00 2001 From: Phillip Johnsen Date: Sat, 11 Jan 2020 20:35:44 +0100 Subject: [PATCH] Update usage examples to not include jQuery Historically jQuery was seen as an absolute minimal to create anything with JavaScript. That time has past now that relatively modern browsers has excellent support for a lot of the things jQuery helped us with -- at least with the trivial examples shown in our README. Therefore removing jQuery usage from our examples as that should not be a necessary dependency in these examples. --- README.md | 48 ++++++++++++++++++++++++++---------------------- 1 file changed, 26 insertions(+), 22 deletions(-) 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; }); } ```