JQuery - HTML en Javascript Coder en dur - Y at-il une meilleure façon de créer dynamiquement des éléments dom?

Question

J'ai beaucoup de messages, et HTML brut que je coder en dur dans mon code javascript, comme:

    var subjectId = $(subject).attr('subjectId'); 
    var subjectName = $(subject).attr('subjectName'); 
    var html = "<table id='invitations' class='invitations' width='100%'><tbody>";
    $(subject).find('group').each( function() {     
        var groupId = $(this).attr('groupId');
        var groupName = $(this).attr('groupName');
        var ownerId = $(this).attr('ownerId');
        var owner = findStudentNameById( subjectId, ownerId );
        html += "<tr>" +
                    "<td width='55px'><img src='images/gplg.png' /></td>" +
                    "<td>" + subjectId + " <span class='subjectName'>" + subjectName + '</span> <br /> '  + groupId + 
                    " - <span class='group'>" + groupName + "</span><br /> Created By "  + owner + "</td>" +
                "</tr>" +
                "<tr>" +
                    "<td width='55px'></td>" +
                    "<td><img class='accept' src='images/accept.png' />" +
                        "<img class='decline' src='images/decline.png' /> " +
                    "</td>" +
                "</tr>";                    
    });
    html += "</tbody></table>";
    return html;

ou ...

$('#inviteform').submit( function (){
            var invitesSent = false;
            var html = '<h3>Invitations have been sent to the following people</h3><br /><ul>';
            $('#inviteform').find('input:checkbox').each( function() {
                if ( $(this).is(':checked')){
                    html += '<li>+ <a href="#">' + $(this).val() +'</a></li>';
                    invitesSent = true;
                }
            });
            html += '</ul>';

            if ( !invitesSent ){
                html = '<h3>You did not select any invitees, no invitations have been sent.</h3>';
            }

            $('#content').hide().fadeOut(2000);
            $('#content').html(html).slideDown("slow");
            $('#slogan').html('Congratulations! Your group is now complete. ').fadeIn(2000);

            return false;
        });

Ceci est parce que j'ai 2 zones principales de la page (i.e. div titre et le contenu div), que je dois changer le contenu à la volée. Malheureusement, je ne peux pas séparer ce contenu dans des fichiers différents.

Alors, est-il une des meilleures pratiques derrière la création des éléments de texte et DOM pour ces divs au lieu de coder en dur tellement de choses.

Im la recherche de la solution la plus élégante, donc je n'ai pas tellement dur de codage.

Merci

Answer 1

La façon dont il vous encourage à coder les chaînes HTML est l'un de mon animal de compagnie déteste avec jQuery.

Je termine généralement juste en utilisant la norme Javascript: document.createElement('TD')

Si vous créez un grand nombre de noeuds du même type, il est préférable / plus rapide de les mettre en cache et utiliser cloneNode(true) pour créer les nouveaux nœuds:

var nodeCache;
    nodeCache.td = document.createElement('TD')

var newTD = nodeCache.td.cloneNode(true);

Je comprends que ce n'est pas makeing beaucoup d'utilisation de jQuery, mais je pense que la façon de jQuery de la manipulation de c'est inélégante.

Answer 2

Vous devriez regarder une bibliothèque de templating. moteurs jQuery texturants

Answer 3

Vous pouvez utiliser le sélecteur de jQuery pour créer des éléments DOM. Par exemple,

$('<table>')

va créer un élément de table que vous pouvez ensuite définir les attributs sur puis ajoutez au DOM.

$('<table id="invitations" class="invitations" width="100%">')
    .append('<tbody>')
    .appendTo(selector);
    // etc

Answer 4

Une alternative consiste à utiliser append (), addClass (), css (), attrib () et d'autres méthodes jQuery pour construire DOM. Chaining fera le code plus élégant. Cela fonctionne bien, en particulier pour les petits arbres DOM.

Si vous avez besoin de plus grands arbres DOM, il serait préférable d'utiliser des méthodes AJAX pour les récupérer à partir du serveur. Vous devrez adapter votre code afin de transmettre les données générées dynamiquement.

En outre, vous pouvez envisager la refonte de votre html et javascript code. Vous pouvez par exemple mettre l'arbre DOM dans le html et le cacher (en utilisant CSS ou javascript). Ensuite, vous pouvez le montrer après avoir ajouté les données générées dynamiquement. Cela est beaucoup mieux de la séparation des préoccupations point de vue.

Answer 5

Essayez aller chercher le code html via ajax.

séparera les javascript et html, briser les dépendances.

Answer 6

Utiliser Ajax pour appeler les contrôles utilisateur serait mieux.

De cette façon, vous pouvez faire tout votre balisage dans un contrôle utilisateur html.

A mon humble avis.

Answer 7

Dans votre cas, je séparer les messages du balisage. Vous pouvez avoir un échafaudage html vide dans votre page comme

...<div id="feedback" style="display:none;"><h3 class="headline"></h3><p class="message"></p>...

, puis le remplir en utilisant jQuery. De cette façon, vous pouvez factoriser tous vos messages de l'utilisateur dans un fichier .js externe qui facilite grandement i18n.

BTW, je ne peux pas recommander les moteurs de modèle JQuery. Soit ils vous obligent à utiliser une syntaxe vraiment maladroit (comme jTemplates), ou vous limiter au clonage d'élément simple. À mon humble avis, vous êtes presque toujours mieux d'utiliser la méthode .clone ().