Utilizzare Mustache.js con AJAX

Mattepuffo's logo
Utilizzare Mustache.js con AJAX

Utilizzare Mustache.js con AJAX

Programmazione, Javascript - AJAX

Ho cominciato a studiarmi un pò Mustache per Javascript, caricando i dati tramite AJAX.

Oltre a Mustache.js, avremmo bisogno anche di jQuery; infine useremo un file di template esterno (giusto per fare un esempio più completo.

Mustache.js lo potete scaricare da GitHub (ho dovuto copiarlo in locale, il caricamento remoto non mi funzionava).

Cominciamo dal file index.html (quello principale):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>MP Films</title>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js" 
                integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
                crossorigin="anonymous">
        </script>
        <script src="mustache.js"></script>
        <script src="script.js"></script>
    </head>
    <body>
        <section class="hero is-dark is-bold">
            <div class="hero-body">
                <div class="container">
                    <p class="title">Mattepuffo's films</p>
                </div>
            </div>
        </section>
        <div id="app" class="columns">
            <div class="column">
                <table id="tbl" class="table is-bordered is-striped is-narrow"></table>
            </div>
        </div>
    </body>
</html>

Questo il file tbl_template.html, dove abbiamo l'HTML che funziona da template:

<thead>
    <tr>
        <th>NOME</th>
        <th>DATA</th>
        <th>DIMENSIONE</th>
        <th>TIPO</th>
        <th></th>
    </tr>
</thead>
<tbody>
    {{#.}}
    <tr>
        <td>{{nome}}</td>
        <td>{{data}}</td>
        <td>{{size}}</td>
        <td>{{ext}}</td>
        <td><a href="" class="button is-dark">Info</a></td>
    </tr>
    {{/.}}
</tbody>

Infine, lo script Javascript (script.js):

const remoteUrl = 'YOUR_URL';

$(function () {
    $.getJSON(remoteUrl, function (data) {
        $.get('tbl_template.html', function (template, textStatus, jqXhr) {
            var html = Mustache.render(template, data);
            $('#tbl').html(html);
        });
    });
});

Prendiamo i dati in remoto, in formato JSON, con jQuery attraverso la funzione $.getJson.

Poi, con $.get, carichiamo il file di template.

Il resto sarà fatto in autonomia; ci penserà Mustache a iterare sui dati.

Ovviamente, la struttura del template dipende dall'output remoto; nel senso che deve rispecchiare i campi del vostro JSON.

Enjoy!

Condividi

Commentami!