jQuery UI: Der beste Weg, HTML-Markup zu laden?

Question

Was ist der beste Weg, um HTML-Markup für einen benutzerdefinierten jQuery UI-Widget?

laden

Bisher habe ich nur gesehen Elemente erstellt Strings (d $(...).wrap('<div></div>')), die für etwas einfach in Ordnung ist. Aber das macht es extrem schwierig, später für komplexere Elemente zu ändern.

Dies scheint ein recht häufiges Problem, aber ich weiß auch, dass die jQuery UI-Bibliothek neu genug ist, dass es keine allgemein anerkannte Lösung für dieses sein kann. Irgendwelche Ideen?

Answer 1

Etwas, das ganz ordentlich zu tun, ist dies:

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

Auf diese Weise sind Sie ein Element zu schaffen, und in einer Variablen sein Referenz Speicher, für die spätere Verwendung.

Answer 2

Wenn Sie eine große Menge komplexer HTML haben, und wollen nicht mit fest codierten Zeichenfolgen in Ihrem JavaScript-Code umgehen, können Sie es in einer separaten HTML-Datei setzen und verwenden Sie die Ajax Ladefunktion .

Es ist verkettbar, so dass Sie die HTML-Datei laden können (das Ganze, oder ein ausgewähltes Fragment), injizieren sie in Ihr aktuelles DOM und rechts am Laufen halten.

Answer 3

Eine Menge Zeit für wirklich komplexe Vorlagen werde ich nur speichern Sie die HTML-Blöcke als Strings in JSON-Objekte für einen späteren Zugriff ... zB:

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

Und dann führt nur einigen Ersatz für diejenigen, wenn die Dinge wieder kommen. Auf diese Weise das Markup etwas von der Logik getrennt wird, um die Daten zu laden, so Vorlagen Auslagern etc kann ein wenig schneller sein.

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

Wie auch immer, hat sich dieser Ansatz funktioniert gut für mich mit AJAX-Widgets und diese Art von Dingen, wo die Möglichkeit besteht, dass das Design radikal um ändern können.

Answer 4

Eine populäre, effiziente Methode ist, alle Ihre zusätzlichen Markup-Ausgang (was auch immer Sie später benötigen) an der Unterseite der Seite in Script-Tags, so dass das Markup nicht vom Browser gerendert wird.

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

Sie können dann Ihre Markup greifen mit jQuery ...

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

Und analysieren diejenigen JS Beispiele, die ich dort warf einen Templating-Engine, wie die in Underscore.js (was ich empfehlen) oder einer der jQuery diejenigen in dieser Antwort: jQuery Templating Engines

Viel Spaß!