jQuery UI: Meilleur moyen de charger le balisage HTML?

Question

Quel est le meilleur moyen de charger le balisage HTML pour un widget d'interface utilisateur jQuery personnalisé?

Jusqu'à présent, j'ai vu des éléments simplement créés à l'aide de chaînes (c'est-à-dire $(...).wrap('<div></div>')), ce qui convient à quelque chose de simple. Cependant, cela rend extrêmement difficile la modification ultérieure pour des éléments plus complexes.

Cela semble être un problème assez courant, mais je sais aussi que la bibliothèque d’interface utilisateur jQuery est suffisamment nouvelle pour qu’il ne puisse pas y avoir de solution largement acceptée. Des idées?

Answer 1

Quelque chose de bien à faire, c'est ceci:

var newDiv = $("<div></div>"); //Create a new element and save a reference
newDiv.attr("id","someid").appendTo("body");

Ainsi, vous créez un élément et stockez sa référence dans une variable pour une utilisation ultérieure.

Answer 2

Si vous avez une grande quantité de code HTML complexe et que vous ne voulez pas gérer les chaînes codées en dur dans votre code JavaScript, vous pouvez le placer dans un fichier HTML séparé et utiliser le Fonction de chargement Ajax .

Il est chaînable, vous pouvez donc charger le fichier HTML (le tout ou un fragment sélectionné), l'injecter dans votre DOM actuel et continuer à avancer.

Answer 3

Souvent, pour des modèles vraiment complexes, je stocke simplement les blocs HTML sous forme de chaînes dans des objets JSON pour un accès ultérieur ... par exemple:

var temp = {
  header : "<div class='foo'><h3>{HEADER}</h3></div>",
  content : "<div class='bar'><p>{COPY}</p></div>"
}

Ensuite, remplacez-les lorsque les choses reviendront. De cette façon, le balisage est un peu séparé de la logique de chargement des données. L'échange de modèles, etc. peut donc être un peu plus rapide.

var text = "I am the header text";
var head = new String(temp.header);
$(target).append(head.replace("{HEADER}",text));

Quoi qu’il en soit, cette approche a bien fonctionné pour moi avec les widgets AJAX et ce genre de choses, où il est possible que la conception change radicalement.

Answer 4

Une méthode efficace et répandue consiste à générer l'intégralité de votre marquage supplémentaire (ce dont vous aurez besoin ultérieurement) au bas de votre page, sous forme de balises de script, afin que ce dernier ne soit pas restitué par le navigateur.

<script type="text/template" id="template-example">
    <!-- All of your markup here -->
    <% // do some JavaScript in here... %>
    <%= echo_this_variable %>
</script>

Vous pouvez ensuite récupérer votre balise à l'aide de jQuery ...

var markup = $('#template-example').html();

Et analysez les exemples JS que j’ai fournis à l’aide d’un moteur de modélisation, tel que celui décrit dans Underscore.js (que je recommande) ou l’un des problèmes jQuery dans cette réponse: moteurs de modélisation jQuery

Amusez-vous!