Ajax Conception / refactoring aide lors du rendu du nouveau contenu - comme éléments de liste et divs

Question

Je viens toujours dans cette odeur de code où je dupliquez le balisage, et je ne suis pas vraiment sûr comment y remédier. Voici un scénario de cas d'utilisation typique:

disons de Let nous aimerions écrire des commentaires à une sorte d'article. En dessous de l'article, on voit un tas de commentaires. Ceux-ci sont ajoutés à la demande de page originale et sont générés par le moteur de templating (Freemarker dans mon cas, mais il peut être PHP ou autre).

Maintenant, chaque fois qu'un utilisateur ajoute un commentaire, nous voulons créer une nouvelle li et l'injectent dans la liste de la page courante des commentaires. Disons que ce li contient un tas de choses comme:

1. avatar de l'utilisateur
2. Leur nom
3. Un lien à cliquer sur leur profil ou leur envoyer un message privé
4. Le texte qu'ils ont écrit
5. La date ils ont écrit le commentaire
6. Certains liens / boutons « modifier » et « Supprimer » si l'utilisateur actuellement connecté a la permission de faire ces actions.

Maintenant, toutes ces choses ont été déjà écrit dans notre modèle qui a généré à l'origine de la page ... maintenant nous devons dupliquer l'intérieur de Javascript!

Bien sûr, nous pouvons utiliser une autre langue templating - comme plugin Template Jquery - pour faciliter la production de la douleur et annexant cette nouvelle li bloc ... mais nous finissons toujours avec double html balisage < em> légèrement différent parce que nous ne pouvons pas utiliser des macros ou autres commodités qui nous sont fournis par la langue templating.

Alors, comment pouvons-nous Refactoriser la duplication? Est-il même possible, ou pouvons-nous mettre juste avec elle? Quelles sont les meilleures pratiques utilisées pour résoudre ce problème?

Answer 1

Ceci est un problème commun et devient plus évident que la complexité augmente de l'interface utilisateur, et les changements doivent être effectués sur le serveur et les modèles de clients. Ce problème peut être fixé en utilisant un même marqueur de modèle sur les deux côtés client et serveur. Les processeurs de modèle doivent être écrits en JavaScript et la langue côté serveur.

Deux autres solutions qui sont plus propres que l'approche ci-dessus, mais les deux ont leurs propres problèmes:

• Faites tout côté client
• Faites tout côté serveur

Si toute la production de balisage se fait sur le côté client, agit alors le serveur plus ou moins comme un service Web qui envoie uniquement les données de retour dans ce qui convient formats de l'application. JSON et XML sont des formats très populaires pour la plupart des services web de nos jours. Le client génère toujours le code HTML nécessaire et JS. Si vous allez avec cette approche, la frontière entre le client et le serveur doit être bien défini. Étant donné que le client a une connaissance limitée de ce qui se passe sur le serveur, cela signifie que les codes d'erreur appropriés doivent être définis. la gestion de l'Etat deviendra plus difficile puisque la plupart / toutes les interactions du serveur qui va se passer de manière asynchrone. Un exemple d'ajouter un commentaire avec cette approche peut ressembler à:

$('#add-comment').click(function() {
    var comment = $('#comment-box').text();
    $.ajax('http://example.com/add', {
        success: function() {
            addCommentRow(comment);
        },
        ...
    });
});

function addCommentRow(comment) {
    var user = currentUser().name;

    var html = "<li><b>{user}</b> says {comment}</li>";
    html = html.replace("{user}", user).replace("{comment}", comment);

    var item = $('<li>').html(html);
    $('#comments').append(item);
}

L'autre approche consiste à tout faire côté serveur. Chaque fois qu'un changement se produit, tirer une demande au serveur, et demander la vue mise à jour. Avec un back-end rapide, les temps de réponse dans le cadre d'un second, et les indicateurs appropriés de l'activité du réseau, l'application doit sembler très réactif malgré tout se passe sur le serveur. L'exemple ci-dessus serait simplifié à:

$('#add-comment').click(function() {
    $.ajax('http://example.com/add', {
        success: function(response) {
            $('#comments').html(response);
        },
        ...
    });
});

Bien que cela semble beaucoup plus propre du côté client que l'approche précédente, nous avons juste déplacé la génération de balisage sur le serveur. Toutefois, si la demande est très AJAXy comme Google Maps, cette approche peut être plus facile de travailler avec. Encore une fois, il est une question de la complexité de l'application est, et peut-être le maintien côté client de l'Etat est une nécessité pour vous, dans ce cas, vous pouvez aller à l'approche précédente.