« Mustache » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
(3 versions intermédiaires par le même utilisateur non affichées) | |||
Ligne 3 : | Ligne 3 : | ||
* [https://mustache.github.io/#demo Demo] | * [https://mustache.github.io/#demo Demo] | ||
* [https://github.com/janl/mustache.js/ Doc] | * [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]= | = [https://github.com/janl/mustache.js/#include-templates Include template]= | ||
<kode lang='html'> | <kode lang='html'> | ||
<script id="template" type="x-tmpl-mustache"> | <script id="template" type="x-tmpl-mustache"> | ||
Hello {{ name }} | Hello {{ name }} | ||
</script> | </script> | ||
Dernière version du 25 mars 2021 à 16:57
Links
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; } |