« Mustache » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
(Page créée avec « Category:Javascript = Links = * [https://mustache.github.io/#demo Demo] * [https://github.com/janl/mustache.js/ Doc] ») |
|||
| (9 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]= | |||
<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> | |||
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;
}
|
