diff --git a/src/Tingle.Extensions.Mustache/README.md b/src/Tingle.Extensions.Mustache/README.md index c8864d9..556f07d 100644 --- a/src/Tingle.Extensions.Mustache/README.md +++ b/src/Tingle.Extensions.Mustache/README.md @@ -1,5 +1,221 @@ # Tingle.Extensions.Mustache -If you are looking for documentation for this package. It does not exist yet. Please help write it. +This library is based on [Mustache](https://github.com/ActiveCampaign/mustachio) by providing abstractions that help with creating dynamic content using templates. -TODO: write this documentation file +## Template Syntax + +Here is everything you need to know about the engine. + +### Variables + +The most basic mustache type is a variable. A `{{name}}` tag in a template will try to find the name key in the current context. If the name key is not found, nothing will be rendered. + +If you have a template model like this (represented as JSON): + +```json +{ + "user": { + "name": "John" + } +} +``` + +And this template: + +```Welcome home {{ user.name }}``` + +The rendered output will be + +```Welcome home John``` + +### Sections + +Sections render blocks of text one or more times, depending on the value of the key in the current context. + +A section begins with a pound and ends with a slash. That is, `{{#user}}` begins a "user" section while `{{/user}}` ends it. + +#### Empty Lists or False Values + +If the user key exists and has a value of false or an empty list, the HTML between the pound and slash will not be displayed. + +Template: + +```html +Shown. +{{#user}} + Never shown! +{{/user}} +``` + +Data: + +```json +{ + "user": false +} +``` + +Output: + +```Shown``` + +#### Non-Empty Lists + +If the user key exists and has a non-false value, the HTML between the pound and slash will be rendered and displayed one or more times. + +Template: + +```html +{{#user}} + Welcome home {{ name }} +{{/user}} +``` + +Data: + +```json +{ + "user": [ + { "name": "John" }, + { "name": "Mary" } + ] +} +``` + +Output: + +```html +Welcome home John +Welcome home Mary +``` + +#### Inverted Sections + +An inverted section begins with a caret (hat) and ends with a slash. + +While sections can be used to render text one or more times based on the value of the key, inverted sections may render text once based on the inverse value of the key. That is, they will be rendered if the key doesn't exist, is false, or is an empty list. + +Template: + +```html +{{#repo}} + +{{/repo}} +{{^repo}} + No repos! +{{/repo}} +``` + +Data: + +```json +{ + +} +``` + +Output: + +```No repos!``` + +#### Comments + +Comments begin with a bang and are ignored. The following template: + +```html +
{{name}} vehicles:
+John vehicles:
+