W3.JS Wyświetl dane HTML
Wyświetl dane w HTML:
w3.displayObject(selector)
Łatwy w użyciu
Po prostu dodaj nawiasy {{ }} do dowolnego elementu HTML, aby zarezerwować miejsce na swoje dane:
Przykład
<div id="id01">
{{firstName}} {{lastName}}
</div>
Na koniec wywołaj w3.displayObject , aby wyświetlić dane w kodzie HTML:
Przykład
<script>
var myObject = {"firstName" : "John", "lastName" : "Doe"};
w3.displayObject("id01", myObject);
</script>
Pierwszym parametrem jest identyfikator elementu HTML do użycia (id01).
Drugim parametrem jest obiekt danych do wyświetlenia (myObject).
Wyświetlanie większego obiektu
Aby zademonstrować moc W3.JS, wyświetlimy większy obiekt JavaScript (myObject).
Obiekt jest tablicą obiektów customers z właściwościami CustomerName, City i Country:
mójObiekt
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"}
]};
Wypełnianie listy rozwijanej
Przykład
<select id="id01">
<option
w3-repeat="customers">{{CustomerName}}</option>
</select>
<script>
w3.displayObject("id01", myObject);
</script>
Wypełnianie listy
Przykład
<ul id="id01">
<li w3-repeat="customers">{{CustomerName}}</li>
</ul>
<script>
w3.displayObject("id01", myObject);
</script>
Łączenie w3.displayObject z w3.includeHTML
W przypadku dołączania fragmentów kodu HTML do strony internetowej należy zapewnić, że inne funkcje zależne od dołączonego kodu HTML nie zostaną wykonane przed prawidłowym dołączeniem kodu HTML.
Najprostszym sposobem na "wstrzymanie" kodu jest umieszczenie go w funkcji zwrotnej.
Funkcję zwrotną można dodać jako argument do w3.includeHTML():
Przykład
<div w3-include-html="list.html"></div>
<script>
w3.includeHTML(myCallback);
function myCallback() {
w3.displayObject("id01", myObject);
}
</script>
Wypełnianie pól wyboru
Przykład
<table id="id01">
<tr w3-repeat="customers">
<td>{{CustomerName}}</td>
<td><input type="checkbox" {{checked}}"></td>
</tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
Klasy wypełniania
Przykład
<table id="id01">
<tr w3-repeat="customers" class="{{Color}}">
<td>{{CustomerName}}</td>
</tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
Wypełnianie stołu
Przykład
<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>
Wypełnianie elementu <wybierz>
Przykład
<select id="id01">
<option w3-repeat="x in cars">{{x}}</option>
</select>
<script>
w3.displayObject("id01", {"cars" : ["Volvo", "Ford", "BMW", "Mercedes"]});
</script>