Rendu du contenu HTML à partir du résultat AJAX

Question

J'écris une application qui rend une liste d'objets "Job" à partir d'une réponse AJAX JSON.

Quelle est la meilleure façon de restituer le balisage à partir des données renvoyées. Maintenant, je suis assez convaincu que c'est une mauvaise idée de générer un balisage HTML côté serveur et de le renvoyer de l'appel AJAX. Par expérience, cela rend le HTML difficile à maintenir et le fait de factoriser le contenu est un cauchemar, donc je retourne une collection d'objets Job en JSON.

La question, alors, est comment rendre le HTML basé sur l'entrée de l'utilisateur? J'ai vu quelques exemples d'avoir votre modèle de balisage sur la page puis utiliser JQuery pour le cloner et remplir avec les données pertinentes l'insérer dans le DOM. Le problème avec ceci est que le modèle contient du contenu visible (images et autres) et que l'application doit se dégrader. J'ai donc un répéteur sur la page qui code le code et charge au chargement de la page si JS n'est pas disponible.

Tout conseil serait apprécié.

Answer 1

John Resig (le mec jQuery) a fait un moteur de template super simple que vous pouvez utiliser clientide, Rick Strahl a a good post à ce sujet. Trimpath propose une solution géniale de création de modèles de clients, baptisée Javascript Templates, qui n'est pas la plus imaginative, mais elle est vraiment très bonne.

Je ne pas normalement des liens Google, mais asp.net ajax (4.0?) A une client side templating venir que va vous permettre de prendre les objets JSON et les DataBind directement dans.

A défaut, je Je vais être des diables défendre et dire "Qu'est-ce qui ne va pas avec HTML sémantique" ?. Tant que c'est sémantique, et a des classes plutôt que des styles codés en dur, je ne vois personnellement rien de mal à retourner le HTML de votre appel côté serveur. Bien sûr, ce n'est pas comme pur comme d'autres solutions, mais c'est un site facile à mettre en place. Dans certains cas, j'ai même trouvé qu'il est plus facile à maintenir car vous laissez le "serveur de codage" retourner HTML avec des classes intégrées et le "clientide coder" peut le faire jusqu'à 6 façons de dimanche :-)

Answer 2

En fonction de la complexité de vos données, il peut être possible de générer le code HTML à l'aide d'objets jQuery. Cela semble encore assez jolie et est plus maintenable que simplement écrire HTML brut:

$.ajax({ 
    url: 'foo', 
    dataType: 'json', 
    success: function(data) { 



     var container = $('<div />') 
         .attr('id', 'container'); 

     for(var i in data.items) { 
      var child = $('<div />') 
         .addClass('container-child'); 

      var title = $('<p />') 
         .html(data.items[i].title) 
         .addClass('item-title'); 

      var description = $('<p />') 
           .html(data.items[i].description) 
           .addClass('item-description'); 

      child.append(title).append(description); 

      container.append(child); 
     } 

     // Remove existing container 
     $('div#container').remove(); 
     // And replace it with the just created one 
     $('body').append(container); 
    } 
}); 

Cette méthode est aussi rapide que l'aide d'un élément HTML « factice », le clonage qui et peuplant les éléments de l'enfant avec des valeurs correctes. À mon avis, c'est plus propre et plus facile à comprendre.