W3.JS Zeigt HTML-Daten an
Daten in HTML anzeigen:
w3.displayObject(selector)
Einfach zu verwenden
Fügen Sie einfach Klammern {{ }} zu jedem beliebigen HTML-Element hinzu, um Platz für Ihre Daten zu reservieren:
Beispiel
<div id="id01">
{{firstName}} {{lastName}}
</div>
Rufen Sie schließlich w3.displayObject auf, um die Daten in Ihrem HTML anzuzeigen:
Beispiel
<script>
var myObject = {"firstName" : "John", "lastName" : "Doe"};
w3.displayObject("id01", myObject);
</script>
Der erste Parameter ist die ID des zu verwendenden HTML-Elements (id01).
Der zweite Parameter ist das anzuzeigende Datenobjekt (myObject).
Anzeigen eines größeren Objekts
Um die Leistungsfähigkeit von W3.JS zu demonstrieren, zeigen wir ein größeres JavaScript-Objekt (myObject) an.
Das Objekt ist ein Array von Kundenobjekten mit den Eigenschaften CustomerName, City und Country:
meinObjekt
var myObject = {"customers":[
{"CustomerName":"Alfreds
Futterkiste","City":"Berlin","Country":"Germany"},
{"CustomerName":"Around the Horn","City":"London","Country":"UK"},
{"CustomerName":"B's Beverages","City":"London","Country":"UK"},
{"CustomerName":"Blauer See
Delikatessen","City":"Mannheim","Country":"Germany"},
{"CustomerName":"Bon app'","City":"Marseille","Country":"France"},
{"CustomerName":"Bottom-Dollar
Marketse","City":"Tsawassen","Country":"Canada"},
{"CustomerName":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"}
]};
Füllen eines Dropdowns
Beispiel
<select id="id01">
<option
w3-repeat="customers">{{CustomerName}}</option>
</select>
<script>
w3.displayObject("id01", myObject);
</script>
Füllen einer Liste
Beispiel
<ul id="id01">
<li w3-repeat="customers">{{CustomerName}}</li>
</ul>
<script>
w3.displayObject("id01", myObject);
</script>
Kombination von w3.displayObject mit w3.includeHTML
Wenn Sie HTML-Snippets in eine Webseite einfügen, müssen Sie sicherstellen, dass andere Funktionen, die vom eingeschlossenen HTML abhängen, nicht ausgeführt werden, bevor das HTML ordnungsgemäß eingeschlossen ist.
Der einfachste Weg, Code „zurückzuhalten“, besteht darin, ihn in eine Callback-Funktion zu platzieren.
Eine Callback-Funktion kann als Argument zu w3.includeHTML() hinzugefügt werden:
Beispiel
<div w3-include-html="list.html"></div>
<script>
w3.includeHTML(myCallback);
function myCallback() {
w3.displayObject("id01", myObject);
}
</script>
Kontrollkästchen ausfüllen
Beispiel
<table id="id01">
<tr w3-repeat="customers">
<td>{{CustomerName}}</td>
<td><input type="checkbox" {{checked}}"></td>
</tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
Klassen füllen
Beispiel
<table id="id01">
<tr w3-repeat="customers" class="{{Color}}">
<td>{{CustomerName}}</td>
</tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
Füllen einer Tabelle
Beispiel
<table id="id01">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr w3-repeat="customers">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
Füllen eines <select>-Elements
Beispiel
<select id="id01">
<option w3-repeat="x in cars">{{x}}</option>
</select>
<script>
w3.displayObject("id01", {"cars" : ["Volvo", "Ford", "BMW", "Mercedes"]});
</script>