Dernière version du 25 mars 2021 à 16:57

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;
}