Salut
Voulant tester Mustache j'ai crée une page devant afficher une liste des article qui se trouve sur une bdd mysql.

Je récupère le résultat de ma bdd en json via ajax puis je la parse pour pouvoir l'utiliser correctement via js.

Cette requête donne (en json) :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
* {
 * "id_categorie":"CATEGORIE",
 * "titre":"TITRE",
 * "image":"IMAGE",
 * "id":"ID",
 * "datetime":"DATE",
 * "texte":"TEXTE",
 * "description":"DESCRIPTION",
 * "couleur":"COULEUR"
 * }
Pour ce qui est du html j'ai écrit ceci :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<section class="content">
 
    <div class="container">
 
        <div id="loading"> Chargement... </div>
 
        <div class="row" id="gridBlog">
 
            {{#blog}}
            <div class="col-xl-4 col-lg-6 col-12 hidden" id="card">
                <div class="card">
                    <div class="cardHeader">
                        <img src="../{{image}}">
                    </div>
                    <div class="cardBody">
 
                        <div class="cardMore">
                            <a href="#"><i class="material-icons">add</i></a>
                        </div>
 
                        <div class="cardMeta">
                            <p>{{id_categorie}}</p>
                            <time>{{datetime}}</time>
                        </div>
                        <article class="cardArticle">
                            <h2><a href="url">{{{titre}}}</a></h2>
                            <p>{{{description}}}</p>
                        </article>
                    </div>
                    <div class="cardFooter">
                        <img src="http://lorempixel.com/40/40/sports/">
                        <div>By Hadock</div>
                    </div>
                </div>
            </div> <!--col-->
            {{/blog}}
 
        </div> <!--row-->
 
    </div> <!--container-->
 
</section> <!--content-->

Et ma requête ajax + mustache (il y a du js et du jquery dedans je sait ) :
Code jscript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function code (elem) {
    console.log('code erreur : ' + elem + ' ' + elem.status+ ' ' + elem.statusText); //code check dans la console
}
 
var card = document.getElementById('card');
var load = document.getElementById('loading');
var grid = document.getElementById('gridBlog');
 
 
var req = new XMLHttpRequest();
req.open('GET', 'getAll.php');
req.send(null);
 
req.addEventListener('load', function(){ //lorsque la ressource est préte
    if(req.status == 200) { //et que tout est bon
        code(req);
 
        card.classList.toggle('hidden');
        load.classList.toggle('hidden');
 
        var tabs = JSON.parse(req.responseText);
 
        $('#gridBlog').html(Mustache.render($('#gridBlog').html(), {blog : tabs} ));
 
    }
});

Du coup lors du rendu tout s'affiche bien mais la première ligne du titre est décaler, ce qui n'arrive pas si je supprime la boucle de mustache (il n'y a pas de rajout de css)
Nom : 2017-08-12 17_15_33-www.coffeecode.fr_deadcells_wiki_ddd_flat_php_.png
Affichages : 64
Taille : 7,0 Ko

Vous avez une idée de ce qui pourrais clocher? Merci d'avance!