« 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

Html.svg
<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>
Js.svg
[
  {
    "id": 1,
    "fields":
    {
      "title": "T1",
      "state": "S1"
    },
    "items":
    [
      { "title": "item1" }
    ]
  }
]
Html.svg
<tbody>
    <tr>
        <td>1</td>
        <td>T1</td>
        <td>S1</td>
        <td><ul><li>item1</li></ul></td>
    </tr>
</tbody>

Include template

Html.svg
<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

Js.svg
// 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;
}