W3.JS Zobrazení dat HTML
Zobrazit data v HTML:
w3.displayObject(selector)
Snadné použití
Stačí přidat hranaté závorky {{ }} k jakémukoli prvku HTML, abyste si vyhradili prostor pro svá data:
Příklad
<div id="id01">
{{firstName}} {{lastName}}
</div>
Nakonec zavolejte w3.displayObject pro zobrazení dat ve vašem HTML:
Příklad
<script>
var myObject = {"firstName" : "John", "lastName" : "Doe"};
w3.displayObject("id01", myObject);
</script>
První parametr je id prvku HTML, který se má použít (id01).
Druhým parametrem je datový objekt k zobrazení (myObject).
Zobrazení většího objektu
Abychom demonstrovali sílu W3.JS, zobrazíme větší objekt JavaScriptu (myObject).
Objekt je pole objektů zákazníků s vlastnostmi CustomerName, City a Country:
myObject
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"}
]};
Vyplnění rozbalovací nabídky
Příklad
<select id="id01">
<option
w3-repeat="customers">{{CustomerName}}</option>
</select>
<script>
w3.displayObject("id01", myObject);
</script>
Vyplnění seznamu
Příklad
<ul id="id01">
<li w3-repeat="customers">{{CustomerName}}</li>
</ul>
<script>
w3.displayObject("id01", myObject);
</script>
Kombinace w3.displayObject s w3.includeHTML
Když na webovou stránku zahrnete úryvky HTML, musíte zajistit, aby se ostatní funkce, které závisí na obsaženém HTML, nespustily, dokud nebude HTML správně zahrnuto.
Nejjednodušší způsob, jak „zadržet“ kód, je umístit jej do funkce zpětného volání.
Funkci zpětného volání lze přidat jako argument do w3.includeHTML():
Příklad
<div w3-include-html="list.html"></div>
<script>
w3.includeHTML(myCallback);
function myCallback() {
w3.displayObject("id01", myObject);
}
</script>
Plnění zaškrtávacích políček
Příklad
<table id="id01">
<tr w3-repeat="customers">
<td>{{CustomerName}}</td>
<td><input type="checkbox" {{checked}}"></td>
</tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
Plnění tříd
Příklad
<table id="id01">
<tr w3-repeat="customers" class="{{Color}}">
<td>{{CustomerName}}</td>
</tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
Plnění tabulky
Příklad
<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>
Vyplnění prvku <select>
Příklad
<select id="id01">
<option w3-repeat="x in cars">{{x}}</option>
</select>
<script>
w3.displayObject("id01", {"cars" : ["Volvo", "Ford", "BMW", "Mercedes"]});
</script>