Mustache

Links

• Demo
• Doc

Exemple

<tbody> {{#.}} <tr> <td>{{id}}</td> <td>{{fields.title}}</td> <td>{{fields.state}}</td> <td><ul> {{#items}}<li>{{title}}</li>{{/items}} {{^items}}No items{{/items}} </ul></td> </tr> {{/.}} </tbody>

[ { "id": 1, "fields": { "title": "T1", "state": "S1" }, "items": [ { "title": "item1" } ] } ]

<tbody> <tr> <td>1</td> <td>T1</td> <td>S1</td> <td><ul><li>item1</li></ul></td> </tr> </tbody>

Include template

<script id="template" type="x-tmpl-mustache"> Hello {{ name }} </script> <script> $(() => { const template = $("#template").html(); const rendered = Mustache.render(template, { name: 'Nico' }); }); </script>

Doesn't handle dots in property name

// a solution could be to replace the dots in property names (it uses lodash) function replaceDotWithUnderscore(obj) { _.forOwn(obj, (value, key) => { if (_.includes(key, '.')) { const cleanKey = _.replace(key, /\./g, '_'); obj[cleanKey] = value; delete obj[key]; } // recursive call if the value is an object or an array if (_.isObject(value)) { return replaceDotWithUnderscore(value); } }); return obj; }