Modèle pour afficher des données reçues en ajax

Bonjour,

J'espère que je poste dans la bonne rubrique car la question que je me pose depuis déjà un moment est assez transverse. Désolé également si ce sujet a déjà été traité car j'avoue ne pas trop savoir comment le rechercher.
Je développe en PHP / MySQL / jQuery et en MVC. Ainsi, en PHP, j'ai mes 3 types de fichiers : controller, model, view.

C'est dans les fichiers views que je fais mes appel Ajax pour afficher dynamiquement mes données. Le souci est, par exemple, quand je veux afficher une liste de données avec pas mal de formatage. En effet, dans mon appel, je dois inclure pas mal de code html qui, selon moi, n'a rien à faire dans du JS.

Exemple :
Code:

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 $.ajax({ //... paramètres de l'appel (url, data...) }) .done(function(retour) { $.each(retour, function(k, item){ // affichage ok $msg = ' <div class="col-md-2"> <h4 class="h5 g-font-weight-300">'+item.nom+'</h4> <p><code>'+item.date+'</code></p> </div> <div class="col-md-10"> <div id="shortcode10"> <div class="shortcode-html"> <blockquote class="blockquote g-bg-gray-light-v5 g-brd-primary g-font-size-16 g-pa-20"> <p>'+item.texte+'</p> </blockquote> </div> </div> </div> '; ('.divMsg').append($msg); }) })
Ce qui me dérange, c'est d'avoir le code html à l'intérieur de ma boucle $.each... en effet, en PHP, je sépare bien les 3 couches MVC et en javascript, je me retrouve avec des morceaux de codes qui, selon le paradigme MVC, devraient être séparés...

J'imagine ne pas être le premier à me poser la question, mais l'un de vous aurait-il une piste que je pourrai explorer pour organiser mon code plus proprement ?

Merci !

simple :

tu met cette partie code HTML dans la partie Body, avec un display none.

apres faut juste la référencer en JS en faire un clone sur lequel tu places les valeurs utiles.

Et oui, tellement simple... mais je n'y avais pas pensé !

Donc voici comment je fais afin que cela serve à d'autres :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="divModele hidden">
	<div class="col-md-2">
		<h4 class="h5 g-font-weight-300 msgNom"></h4>
		<p><code class="msgDate"></code></p>
	</div>
	<div class="col-md-10">
		<div id="shortcode10">
			<div class="shortcode-html">
				<blockquote class="blockquote g-bg-gray-light-v5 g-brd-primary g-font-size-16 g-pa-20">
					<p class="msgTexte"></p>
				</blockquote>
			</div>
		</div>
	</div>
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$.ajax({
// appel ajax
})
.done(function(retour){
    $.each(retour, function(k, item){
		// clonage
		var d = $('.divModele').clone();
		// je retire la classe qui me sert à cloner sinon au prochaine clonage, j'aurai 2 éléments et non un seul
		d.removeClass('divModele').addClass('divMsg');
		// je positionne mes valeurs
		d.find('.msgNom').html(item.nom);
		d.find('.msgDate').html(item.date);
		d.find('.msgTexte').html(item.texte);
		// j'ajoute mon div cloné à ma liste
		d.appendTo('.msgListe');
		// j'affiche mon div
		d.show();
	})
})

pas de résolu ? pas de points ? pas même de considération pour l'aide ?
:no: super...

Bonjour,

Citation:

Envoyé par grinder59

Je développe en PHP / MySQL / jQuery et en MVC

Je ne comprend pas dans ce cas pourquoi ta vue, côté serveur, ne te renvoie pas le « HTML construit ».
Si tu as peur de saturer la ligne tu peux toujours simplifier ton code en revoyant l'affectation des classes sur tes éléments.

Dans la mesure où ta vue te renverrait le « HTML construit », avec jQuery il existe la méthode load() qui dans ce cas serait beaucoup plus indiqué et te permettre de ne pas avoir d'état d'âme.

Toutefois si tu veux maintenir la légèreté des échanges, tu peux toujours utiliser des éléments <template>.
↪ 4.12.3 The template element

Citation:

Envoyé par psychadelic

pas de résolu ? pas de points ? pas même de considération pour l'aide ?
:no: super...

Oupsss...
Le résolu, j'ai oublié... Le reste, je sais pas faire... mais je vais chercher pour me rattraper...

Citation:

Envoyé par NoSmoking

Bonjour,

Je ne comprend pas dans ce cas pourquoi ta vue, côté serveur, ne te renvoie pas le « HTML construit ».
Si tu as peur de saturer la ligne tu peux toujours simplifier ton code en revoyant l'affectation des classes sur tes éléments.

Dans la mesure où ta vue te renverrait le « HTML construit », avec jQuery il existe la méthode load() qui dans ce cas serait beaucoup plus indiqué et te permettre de ne pas avoir d'état d'âme.

Toutefois si tu veux maintenir la légèreté des échanges, tu peux toujours utiliser des éléments <template>.
↪ 4.12.3 The template element

Mes vues ne servent qu'au chargement initial des pages.
Le jQuery me permet d'améliorer l'expérience utilisateur en évitant le rechargement des pages sur la manipulation d'éléments simples (parcourir les pages d'un tableau). Je souhaite limiter les échanges ajax entre le client et le serveur en ne revoyant que les données utiles et non le bout de html construit, d'autant que l'ajax fait appel à des url qui peuvent également me servir dans le cas d'API (les échanges se font json <-> json).

Je vais jeter un oeil aux templates qui, d'après ce que j'en comprends, me permettent de pousser la mise en oeuvre de ce que je veux faire jusqu'au bout.

Merci de ce complément !