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.
janl · Jan 11, 2020 · 185fd6b · 185fd6b
1 parent e77fc7c
commit 185fd6b
Showing 1 changed file with 26 additions and 22 deletions.
diff --git 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
-<!DOCTYPE HTML>
 <html>
-<body onload="loadUser()">
-<div id="target">Loading...</div>
-<script id="template" type="x-tmpl-mustache">
-Hello {{ name }}!
-</script>
-</body>
+  <body onload="renderHello()">
+    <div id="target">Loading...</div>
+    <script id="template" type="x-tmpl-mustache">
+      Hello {{ name }}!
+    </script>
+
+    <script src="https://unpkg.com/mustache@latest"></script>
+    <script src="render.js"></script>
+  </body>
 </html>
 ```
 
-```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;    
   });
 }
 ```