> For the complete documentation index, see [llms.txt](https://openai.gitbook.io/code-cheatsheets/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://openai.gitbook.io/code-cheatsheets/all/html/templating/mustache.md).

# mustache

* logic-less, templating engine handles most, basic things like conditionals
* some advanced features like tags and functions

  **Installing**

  go to github repo and download: <https://jquery.com/download/>

## Rendering Template

* Get template content&#x20;
* render the template&#x20;
* put html back into document &#x20;

```javascript
$("document").ready(() => {
    var tlContent = $('#tmpID').html;
    var result = Mustache.render(tlContent, dataObj);
    containerElement.innerHTML.result;
});
```

```markup
<script type="text/template" id="tmpID>

</script>
```

## Sections and Conditions

Repeated data: Loop over all the employees and get each individual object

```javascript
var template = $("#itemTemplate").html();
var result = Mustache.render(template, {
               "employees" : [{
                  ......

               }]);
            $("#container").html(result);
```

```markup
<script type="text/template">
{{#employees}}
    <div> {{name}} </div>
    {{#inStock}}        
    <div><span>Quantity in stock: </span><span>{{quantity}}</span></div>
    {{/inStock}}
    {{^inStock}}
    <div><span>It appears we are out of stock on this item :-(</span></div>
    {{/inStock}}
{{/employees}}
</script>
```

## Functions

is the value of the field is actually a function, you can use like a property . Mustache will call it and this. will be set to the data object itself.

What if we make a section with a function that takes a text and renders