« Mustache » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
| Ligne 12 : | Ligne 12 : | ||
<td>{{fields.title}}</td> | <td>{{fields.title}}</td> | ||
<td>{{fields.state}}</td> | <td>{{fields.state}}</td> | ||
<td><ul>{{#items}}<li>{{title}}</li>{{/items}}</ul></td> | <td><ul> | ||
{{#items}}<li>{{title}}</li>{{/items}} | |||
{{^items}}No items{{/items}} | |||
</ul></td> | |||
</tr> | </tr> | ||
{{/.}} | {{/.}} | ||
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;
}
|
