W3.JS Visualizza dati HTML
Visualizza i dati in HTML:
w3.displayObject(selector)
Facile da usare
Aggiungi le parentesi {{ }} a qualsiasi elemento HTML per riservare spazio ai tuoi dati:
Esempio
<div id="id01">
{{firstName}} {{lastName}}
</div>
Infine chiama w3.displayObject per visualizzare i dati nel tuo HTML:
Esempio
<script>
var myObject = {"firstName" : "John", "lastName" : "Doe"};
w3.displayObject("id01", myObject);
</script>
Il primo parametro è l'id dell'elemento HTML da utilizzare (id01).
Il secondo parametro è l'oggetto dati da visualizzare (myObject).
Visualizzazione di un oggetto più grande
Per dimostrare la potenza di W3.JS, visualizzeremo un oggetto JavaScript più grande (myObject).
L'oggetto è una matrice di oggetti clienti con le proprietà NomeCliente, Città e Paese:
mioOggetto
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"}
]};
Riempimento di un menu a discesa
Esempio
<select id="id01">
<option
w3-repeat="customers">{{CustomerName}}</option>
</select>
<script>
w3.displayObject("id01", myObject);
</script>
Compilazione di una lista
Esempio
<ul id="id01">
<li w3-repeat="customers">{{CustomerName}}</li>
</ul>
<script>
w3.displayObject("id01", myObject);
</script>
Combinando w3.displayObject con w3.includeHTML
Quando includi frammenti di codice HTML in una pagina web, devi assicurarti che altre funzioni che dipendono dall'HTML incluso non vengano eseguite prima che l'HTML sia stato incluso correttamente.
Il modo più semplice per "trattenere" il codice è inserirlo in una funzione di callback.
Una funzione di callback può essere aggiunta come argomento a w3.includeHTML():
Esempio
<div w3-include-html="list.html"></div>
<script>
w3.includeHTML(myCallback);
function myCallback() {
w3.displayObject("id01", myObject);
}
</script>
Riempimento delle caselle di controllo
Esempio
<table id="id01">
<tr w3-repeat="customers">
<td>{{CustomerName}}</td>
<td><input type="checkbox" {{checked}}"></td>
</tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
Classi di riempimento
Esempio
<table id="id01">
<tr w3-repeat="customers" class="{{Color}}">
<td>{{CustomerName}}</td>
</tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
Riempire una tabella
Esempio
<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>
Riempimento di un elemento <select>
Esempio
<select id="id01">
<option w3-repeat="x in cars">{{x}}</option>
</select>
<script>
w3.displayObject("id01", {"cars" : ["Volvo", "Ford", "BMW", "Mercedes"]});
</script>