Constructeur de ligne de tableau jQuery

Question

Il existe une approche maintanble pour construire des DOM avec jQuery? Jetez un oeil à la méthode append de ce code ...

$.getJSON("api/test", function(data) { 
    $.each(data, function() { 
     $("#tests").append($('<tr><td><input type="radio" name="' + this["name"] + '"/><td>' + this["name"] + '</td><td>' + this["descr"] + '</td></tr>')); 
    }); 
}); 

Je pense (ou du moins je l'espère), il y a une meilleure façon. Pouvez-vous refactoriser cela pour être plus lisible?

Answer 1

Regardez le plugin du template.

http://plugins.jquery.com/project/jquerytemplate

Votre code peut maintenant ressembler,

$.getJSON("api/test", 
    function(data) 
    { 
     var t = $.template('<tr><td><input type="radio" name="{name}"/><td>{name}</td><td>{descr}</td></tr>'); 
     $.each(data, function() 
     { 
      $("#tests").append(t, this); 
     } 
    } 
); 

EDIT

Comme redsquare souligne à juste titre, si vous avez un grand nombre de lignes, en faisant la manipulation du DOM dans chaque itération peut être vraiment lent. Ne modifiez pas votre code à moins d'avoir profilé votre code et trouvé que cette boucle particulière est le goulot d'étranglement.

Si j'emprunte le 'string.Format' method from this post, vous pouvez faire quelque chose comme

$.getJSON("api/test", 
    function(data) 
    { 
     var template = '<tr><td><input type="radio" name="{name}"/><td>{descr}</td><td>{1}</td></tr>'; 
     var html = []; 
     $.each(data, function() 
     { 
      html.push(template.format(this)); 
     } 
     $('#tests').append(html.join('')); 
    } 
); 

EDIT: Modified the string.Format function prendre la clé en fonction du nom. Maintenant, votre code de modèle peut utiliser {name}, {descr} au lieu d'utiliser {0}, {1}. La fonction va essayer de trouver la propriété avec le même nom dans l'argument passé à la fonction.

Aussi, regardez l'approche de Rick Strahl et voyez si cela a plus de sens pour vous.

http://www.west-wind.com/WebLog/posts/300754.aspx

Answer 2

Je ne voudrais pas ajouter à l'intérieur du chacun. Il est préférable d'utiliser un stringbuilder ou de le pousser dans un tableau et de l'ajouter une fois avec .join()

Le choix dépend du navigateur pour lequel vous essayez d'optimiser. L'ajout au DOM est très envahissant en raison de l'écran reflows donc je minimiserais le nombre de fois que j'appelle le .append.

Il existe de nombreuses comparaisons de performances sur le Web qui détaillent les performances des deux options. Un here.

Exemple de tableau rejoindre

$.getJSON("api/test", 
    function(data) 
    { 
     var rowsToAppend=[]; 

     $.each(data, function() 
     { 
      rowsToAppend.push('<tr><td></td></tr>'); 
     } 

     $("#tests").append(rowsToAppend.join()); 
    } 
);