W3.JS HTML-gegevens weergeven
Gegevens weergeven in HTML:
w3.displayObject(selector)
Makkelijk te gebruiken
Voeg gewoon haakjes {{ }} toe aan elk HTML-element om ruimte te reserveren voor uw gegevens:
Voorbeeld
<div id="id01">
{{firstName}} {{lastName}}
</div>
Roep tot slot w3.displayObject aan om de gegevens in uw HTML weer te geven:
Voorbeeld
<script>
var myObject = {"firstName" : "John", "lastName" : "Doe"};
w3.displayObject("id01", myObject);
</script>
De eerste parameter is de id van het te gebruiken HTML-element (id01).
De tweede parameter is het gegevensobject dat moet worden weergegeven (myObject).
Een groter object weergeven
Om de kracht van W3.JS te demonstreren, zullen we een groter JavaScript-object (myObject) weergeven.
Het object is een array van klantobjecten met de eigenschappen CustomerName, City en Country:
mijnObject
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"}
]};
Een vervolgkeuzelijst vullen
Voorbeeld
<select id="id01">
<option
w3-repeat="customers">{{CustomerName}}</option>
</select>
<script>
w3.displayObject("id01", myObject);
</script>
Een lijst vullen
Voorbeeld
<ul id="id01">
<li w3-repeat="customers">{{CustomerName}}</li>
</ul>
<script>
w3.displayObject("id01", myObject);
</script>
W3.displayObject combineren met w3.includeHTML
Wanneer u HTML-fragmenten in een webpagina opneemt, moet u ervoor zorgen dat andere functies die afhankelijk zijn van de opgenomen HTML niet worden uitgevoerd voordat de HTML correct is opgenomen.
De eenvoudigste manier om code "achter te houden" is door deze in een callback-functie te plaatsen.
Een callback-functie kan als argument worden toegevoegd aan w3.includeHTML():
Voorbeeld
<div w3-include-html="list.html"></div>
<script>
w3.includeHTML(myCallback);
function myCallback() {
w3.displayObject("id01", myObject);
}
</script>
Vullen van selectievakjes
Voorbeeld
<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 vullen
Voorbeeld
<table id="id01">
<tr w3-repeat="customers" class="{{Color}}">
<td>{{CustomerName}}</td>
</tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
Een tafel vullen
Voorbeeld
<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>
Een <select> Element vullen
Voorbeeld
<select id="id01">
<option w3-repeat="x in cars">{{x}}</option>
</select>
<script>
w3.displayObject("id01", {"cars" : ["Volvo", "Ford", "BMW", "Mercedes"]});
</script>