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) :
Pour ce qui est du html j'ai écrit ceci :
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" * }
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)
Vous avez une idée de ce qui pourrais clocher? Merci d'avance!
Partager