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

stimmen
2

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

Bisher habe ich nur gesehen Elemente erstellt Strings (dh $(...).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?

Veröffentlicht am 09/12/2008 um 23:25
quelle vom benutzer
In anderen Sprachen...                            


4 antworten

stimmen
6

Etwas, was recht ordentlich ist, dies zu tun:

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

Auf diese Weise schaffen Sie ein Element, und zum Speichern der Referenz in einer Variablen, für die spätere Verwendung.

Beantwortet am 09/12/2008 um 23:49
quelle vom benutzer

stimmen
2

Wenn Sie eine große Menge komplexer HTML haben, und wollen nicht mit fest codierten Zeichenfolge 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 (die ganze Sache, oder ein ausgewähltes Fragment) laden können, injizieren sie in Ihr aktuelles DOM und rechts weitermachen.

Beantwortet am 21/09/2009 um 23:45
quelle vom benutzer

stimmen
1

Eine Menge Zeit für wirklich komplexe Vorlagen ich werde 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 führen Sie dann nur einigen Ersatz für diejenigen, wenn die Dinge wieder kommen. Auf diese Weise wird das Markup etwas von der Logik getrennt, um die Daten zu laden, so Vorlagen usw. auslagern kann ein wenig schneller.

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

Auf jeden Fall 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.

Beantwortet am 21/09/2009 um 23:19
quelle vom benutzer

stimmen
0

Eine beliebte, effiziente Methode ist, alle Ihrer zusätzlichen Markup-Ausgang (was auch immer Sie später benötigen) an die 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 Ihren Markup mit jQuery dann greifen ...

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

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

Habe Spaß!

Beantwortet am 27/01/2013 um 23:46
quelle vom benutzer

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more