W3.JS Wys HTML-data
Wys data in HTML:
w3.displayObject(selector)
Maklik om te gebruik
Voeg net hakies {{ }} by enige HTML-element om spasie vir jou data te reserveer:
Voorbeeld
<div id="id01">
{{firstName}} {{lastName}}
</div>
Bel uiteindelik w3.displayObject om die data in jou HTML te vertoon:
Voorbeeld
<script>
var myObject = {"firstName" : "John", "lastName" : "Doe"};
w3.displayObject("id01", myObject);
</script>
Die eerste parameter is die ID van die HTML-element om te gebruik (id01).
Die tweede parameter is die data-objek om te vertoon (myObject).
Vertoon 'n groter voorwerp
Om die krag van W3.JS te demonstreer, sal ons 'n groter JavaScript-voorwerp (myObject) vertoon.
Die objek is 'n reeks klante-objekte met die CustomerName, City, and Country eienskappe:
my Voorwerp
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"}
]};
Vul 'n aftreklys in
Voorbeeld
<select id="id01">
<option
w3-repeat="customers">{{CustomerName}}</option>
</select>
<script>
w3.displayObject("id01", myObject);
</script>
Vul 'n lys
Voorbeeld
<ul id="id01">
<li w3-repeat="customers">{{CustomerName}}</li>
</ul>
<script>
w3.displayObject("id01", myObject);
</script>
Die kombinasie van w3.displayObject met w3.includeHTML
Wanneer jy HTML-brokkies in 'n webblad insluit, moet jy verseker dat ander funksies wat afhanklik is van die ingeslote HTML nie uitgevoer word voordat die HTML behoorlik ingesluit is nie.
Die maklikste manier om kode te "terughou" is om dit in 'n terugbelfunksie te plaas.
'n Terugbelfunksie kan as 'n argument by w3.includeHTML():
Voorbeeld
<div w3-include-html="list.html"></div>
<script>
w3.includeHTML(myCallback);
function myCallback() {
w3.displayObject("id01", myObject);
}
</script>
Vul Check Boxes
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>
Voltooi klasse
Voorbeeld
<table id="id01">
<tr w3-repeat="customers" class="{{Color}}">
<td>{{CustomerName}}</td>
</tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
Vul 'n tafel
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>
Vul 'n <kies> element in
Voorbeeld
<select id="id01">
<option w3-repeat="x in cars">{{x}}</option>
</select>
<script>
w3.displayObject("id01", {"cars" : ["Volvo", "Ford", "BMW", "Mercedes"]});
</script>