Voir la source de Mustache

[[Category:Javascript]]
= Links =
* [https://mustache.github.io/#demo Demo]
* [https://github.com/janl/mustache.js/ Doc]

= Exemple =
<kode lang='html'>
<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>
</kode>

<kode lang='js'>
[
  {
    "id": 1,
    "fields":
    {
      "title": "T1",
      "state": "S1"
    },
    "items":
    [
      { "title": "item1" }
    ]
  }
]
</kode>

<kode lang='html'>
<tbody>
    <tr>
        <td>1</td>
        <td>T1</td>
        <td>S1</td>
        <td><ul><li>item1</li></ul></td>
    </tr>
</tbody>
</kode>

= [https://github.com/janl/mustache.js/#include-templates Include template]=
<kode lang='html'>
<script id="template" type="x-tmpl-mustache">
Hello {{ name }}
</script>

<script>
$(() => {
    const template = $("#template").html();
    const rendered = Mustache.render(template, { name: 'Nico' });
});
</script>
</kode>

= [https://github.com/janl/mustache.js/issues/343 Doesn't handle dots in property name] =
<kode lang='js'>
// 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;
}
</kode>