W3.JS HTML Verilerini Görüntüle
Verileri HTML olarak göster:
w3.displayObject(selector)
Kullanımı kolay
Verileriniz için yer ayırmak için herhangi bir HTML öğesine {{ }} parantezleri eklemeniz yeterlidir :
Örnek
<div id="id01">
{{firstName}} {{lastName}}
</div>
Son olarak , HTML'nizdeki verileri görüntülemek için w3.displayObject'i arayın:
Örnek
<script>
var myObject = {"firstName" : "John", "lastName" : "Doe"};
w3.displayObject("id01", myObject);
</script>
İlk parametre, kullanılacak HTML öğesinin kimliğidir (id01).
İkinci parametre, görüntülenecek veri nesnesidir (myObject).
Daha Büyük Bir Nesne Görüntüleme
W3.JS'nin gücünü göstermek için daha büyük bir JavaScript nesnesi (myObject) görüntüleyeceğiz.
Nesne, MüşteriAdı, Şehir ve Ülke özelliklerine sahip bir dizi müşteri nesnesidir:
benim nesnem
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"}
]};
Bir Açılır Listeyi Doldurma
Örnek
<select id="id01">
<option
w3-repeat="customers">{{CustomerName}}</option>
</select>
<script>
w3.displayObject("id01", myObject);
</script>
Liste Doldurma
Örnek
<ul id="id01">
<li w3-repeat="customers">{{CustomerName}}</li>
</ul>
<script>
w3.displayObject("id01", myObject);
</script>
w3.displayObject'i w3.includeHTML ile birleştirme
Bir web sayfasına HTML parçacıkları eklediğinizde, HTML düzgün bir şekilde dahil edilmeden önce dahil edilen HTML'ye bağlı diğer işlevlerin yürütülmemesini sağlamalısınız.
Kodu "saklamanın" en kolay yolu, onu bir geri arama işlevine yerleştirmektir.
w3.includeHTML() işlevine argüman olarak bir geri çağırma işlevi eklenebilir:
Örnek
<div w3-include-html="list.html"></div>
<script>
w3.includeHTML(myCallback);
function myCallback() {
w3.displayObject("id01", myObject);
}
</script>
Onay Kutularının Doldurulması
Örnek
<table id="id01">
<tr w3-repeat="customers">
<td>{{CustomerName}}</td>
<td><input type="checkbox" {{checked}}"></td>
</tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
Doldurma Sınıfları
Örnek
<table id="id01">
<tr w3-repeat="customers" class="{{Color}}">
<td>{{CustomerName}}</td>
</tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
Tablo Doldurma
Örnek
<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>
Bir <select> Elemanını Doldurma
Örnek
<select id="id01">
<option w3-repeat="x in cars">{{x}}</option>
</select>
<script>
w3.displayObject("id01", {"cars" : ["Volvo", "Ford", "BMW", "Mercedes"]});
</script>