W3.JS يعرض بيانات HTML
عرض البيانات بتنسيق HTML:
w3.displayObject(selector)
سهل الاستخدام
فقط أضف الأقواس {{}} إلى أي عنصر HTML لحجز مساحة لبياناتك:
مثال
<div id="id01">
{{firstName}} {{lastName}}
</div>
أخيرًا ، اتصل بـ w3.displayObject لعرض البيانات بتنسيق HTML الخاص بك:
مثال
<script>
var myObject = {"firstName" : "John", "lastName" : "Doe"};
w3.displayObject("id01", myObject);
</script>
المعلمة الأولى هي معرف عنصر HTML المراد استخدامه (id01).
المعلمة الثانية هي كائن البيانات المراد عرضه (myObject).
عرض كائن أكبر
لإثبات قوة W3.JS ، سنعرض كائن JavaScript أكبر (myObject).
الكائن عبارة عن مصفوفة من كائنات العملاء مع خصائص اسم العميل والمدينة والبلد:
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"}
]};
ملء القائمة المنسدلة
مثال
<select id="id01">
<option
w3-repeat="customers">{{CustomerName}}</option>
</select>
<script>
w3.displayObject("id01", myObject);
</script>
ملء قائمة
مثال
<ul id="id01">
<li w3-repeat="customers">{{CustomerName}}</li>
</ul>
<script>
w3.displayObject("id01", myObject);
</script>
دمج w3.displayObject مع w3.includeHTML
عندما تقوم بتضمين مقتطفات HTML في صفحة ويب ، يجب عليك تأمين أن الوظائف الأخرى التي تعتمد على HTML المضمن لا يتم تنفيذها قبل تضمين HTML بشكل صحيح.
أسهل طريقة "لكبح" الكود هي وضعه في وظيفة رد الاتصال.
يمكن إضافة وظيفة رد الاتصال كوسيطة لـ w3.includeHTML ():
مثال
<div w3-include-html="list.html"></div>
<script>
w3.includeHTML(myCallback);
function myCallback() {
w3.displayObject("id01", myObject);
}
</script>
تعبئة خانات الاختيار
مثال
<table id="id01">
<tr w3-repeat="customers">
<td>{{CustomerName}}</td>
<td><input type="checkbox" {{checked}}"></td>
</tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
فصول ملء
مثال
<table id="id01">
<tr w3-repeat="customers" class="{{Color}}">
<td>{{CustomerName}}</td>
</tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
ملء الجدول
مثال
<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>
ملء عنصر <حدد>
مثال
<select id="id01">
<option w3-repeat="x in cars">{{x}}</option>
</select>
<script>
w3.displayObject("id01", {"cars" : ["Volvo", "Ford", "BMW", "Mercedes"]});
</script>