From e70359981115777ecc7204255270ce87728bb1cb Mon Sep 17 00:00:00 2001 From: Pascal Pfiffner Date: Mon, 31 Mar 2014 16:18:05 -0400 Subject: [PATCH] Describe two techniques on how to load templates in the README --- README.md | 41 +++++++++++++++++++++++++++++++++++++++-- 1 file changed, 39 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 729f152..fae82d9 100644 --- a/README.md +++ b/README.md @@ -39,9 +39,46 @@ In this example, the `Mustache.render` function takes two parameters: 1) the [mu ## Templates -A [mustache](http://mustache.github.com/) template is a string that contains any number of mustache tags. Tags are indicated by the double mustaches that surround them. `{{person}}` is a tag, as is `{{#person}}`. In both examples we refer to `person` as the tag's key. +A [mustache](http://mustache.github.com/) template is a string that contains any number of mustache tags. Tags are indicated by the double mustaches that surround them. `{{person}}` is a tag, as is `{{#person}}`. In both examples we refer to `person` as the tag's key. There are several types of tags available in mustache.js, described below. -There are several types of tags available in mustache.js. +There are several techniques that can be used to load templates and hand them to mustache.js, here are two of them: + +#### 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`: + +```html + + +
Loading...
+ + + +``` + +```js +function loadUser() { + var template = $('#template').val(); + 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`: + +```js +function loadUser() { + $.get('template.mst', function(template) { + var html = Mustache.render(template, {name: "Luke"}); + $('#target').html(rendered); + }); +} +``` ### Variables