Mise à jour du code HTML via JSON/AJAX

Question

J'utilise JSON pour gérer les fonctionnalités AJAX dans mes applications de rails depuis que j'en ai entendu parler, parce que l'utilisation de RJS/rendu HTML était «mauvaise» parce qu'elle violait MVC. Le premier projet lourd AJAX sur lequel j'ai travaillé s'est terminé avec 20-30 actions de contrôleurs liés directement à des comportements d'interface utilisateur spécifiques et mon code de vue s'est propagé sur les actions du contrôleur, les partiels et les fichiers rjs. L'utilisation de JSON vous permet de conserver le code spécifique à la vue dans la vue et de parler uniquement pour afficher les actions du contrôleur agnostique/RESTful via AJAX pour obtenir les données nécessaires. Le seul casse-tête que j'ai trouvé en utilisant du JSON pur est que vous devez "rendre" le HTML via JS, ce qui dans le cas d'AJAX qui doit mettre à jour les éléments lourds du DOM, peut être très pénible. Je finis avec code long de la construction de chaîne comme

// ...ajax 
success: function(records){ 
    $(records).each(function(record){ 
    var html = ('<div id="blah">' + record.attr + 
     etc + 
    ') 
    }) 
} 

où etc est de 10-15 lignes de construction dynamique HTML à partir des données d'enregistrement. Outre l'ennui, un retour plus sérieux à cette approche est la duplication de la structure HTML (dans le modèle et dans le JS). * Y a-t-il une meilleure pratique pour cette approche?

(Ma motivation pour enfin tendre la main est que je suis maintenant confié la tâche de mise à jour de HTML si complexe il a fallu deux boucles imbriquées de code Ruby pour rendre en premier lieu. Duplication que Javascript semble fou.)

• Une chose que j'ai considéré est le chargement des fichiers partiels statiques directement à partir du système de fichiers, mais cela semble un peu beaucoup.

Answer 1

Juste arrivé à trouver exactement ce que je cherchais: Jaml

Answer 2

Vous pouvez utiliser la fonction de chargement dans jQuery; Cette charge le contenu d'une page dans un div comme ceci:

$('#content').load("content/" + this.href.split('#')[1] + ".html", '', checkResponse); 

Assurez une vue dynamique et vous êtes bon pour aller ...

Answer 3

Je voudrais aller à la création d'une structure HTML qui contient des espaces réservés pour les éléments que vous aurez besoin de mettre à jour via AJAX. La quantité de structure dépendra de ce que vous mettez à jour; si vous connaissez le nombre d'éléments que vous aurez à l'avance, ce serait quelque chose à l'effet de

<div id="article1"> 
    <div id="article1Headline"></div> 
    <div id="article1Copy"></div> 
    <div id="article1AuthorInfo"></div> 
</div> 
<div id="article2"> 
    <div id="article2Headline"></div> 
    <div id="article2Copy"></div> 
    <div id="article2AuthorInfo"></div> 
</div> 

Vous écrivez alors le code qui fait référence à l'identifiant de chaque élément directement, et insère dans la propriété .innerHTML (ou quoi que ce soit de manière syntaxique plus sucrée jquery a de faire la même chose). À mon humble avis, ce n'est pas si terrible d'avoir à assigner le contenu de chaque élément, la partie que vous ne voulez pas avoir à saupoudrer dans vos fonctions AJAX est la structure HTML elle-même; dans votre application, le contenu est volatile de toute façon.

Cependant, il semble que vous pourriez avoir une liste d'un nombre inconnu d'éléments, dans ce cas, il se peut que vous auriez besoin juste de mettre dans un espace réservé:

<div id="articleList"></div> 

Dans ce cas, je ne voyez pas vraiment une façon d'éviter la construction de la structure HTML dans les appels javascript, mais une quantité raisonnable de décomposition de votre javascript devrait aider que:

function addArticle(headline, copy, authorInfo, i){ 
    createDiv("article" + i + "Headline", headline); 
    createDiv("article" + i + "Copy", copy); 
    createDiv("article" + i + "AuthorInfo", authorInfo); 
} 

(pas de code de cours de travail, mais vous obtenez l'idée ,)

Answer 4

J'aime l'idée de templating. Dans mon expérience, il peut vraiment nettoyer cette manipulation de chaîne désordonnée!

Il existe de nombreuses solutions, par exemple, consultez John Resig (créateur de jQuery):

http://ejohn.org/blog/javascript-micro-templating/