W3.JS Hiển thị dữ liệu HTML
Hiển thị dữ liệu dưới dạng HTML:
w3.displayObject( selector )
Dễ sử dụng
Chỉ cần thêm dấu ngoặc {{ }} vào bất kỳ thành phần HTML nào để dành chỗ cho dữ liệu của bạn:
Ví dụ
<div id="id01">
{{firstName}} {{lastName}}
</div>
Cuối cùng gọi w3.displayObject để hiển thị dữ liệu trong HTML của bạn:
Ví dụ
<script>
var myObject = {"firstName" : "John", "lastName" : "Doe"};
w3.displayObject("id01", myObject);
</script> Tham số đầu tiên là id của phần tử HTML sẽ sử dụng (id01).
Tham số thứ hai là đối tượng dữ liệu cần hiển thị (myObject).
Hiển thị một đối tượng lớn hơn
Để chứng minh sức mạnh của W3.JS, chúng tôi sẽ hiển thị một đối tượng JavaScript lớn hơn (myObject).
Đối tượng là một mảng các đối tượng khách hàng với các thuộc tính Tên khách hàng, Thành phố và Quốc gia:
đối tượng của tôi
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"}
]};
Điền vào danh sách thả xuống
Ví dụ
<select id="id01">
<option
w3-repeat="customers">{{CustomerName}}</option>
</select>
<script>
w3.displayObject("id01", myObject);
</script>
Điền vào danh sách
Ví dụ
<ul id="id01">
<li w3-repeat="customers">{{CustomerName}}</li>
</ul>
<script>
w3.displayObject("id01", myObject);
</script>
Kết hợp w3.displayObject với w3.includeHTML
Khi đưa các đoạn mã HTML vào một trang web, bạn phải đảm bảo rằng các chức năng khác phụ thuộc vào HTML được đưa vào sẽ không thực thi trước khi HTML được đưa vào đúng cách.
Cách dễ nhất để "giữ lại" mã là đặt nó vào hàm gọi lại.
Một hàm gọi lại có thể được thêm làm đối số cho w3.includeHTML():
Ví dụ
<div w3-include-html="list.html"></div>
<script>
w3.includeHTML(myCallback);
function myCallback() {
w3.displayObject("id01", myObject);
}
</script>
Điền vào hộp kiểm
Ví dụ
<table id="id01">
<tr w3-repeat="customers">
<td>{{CustomerName}}</td>
<td><input type="checkbox" {{checked}}"></td>
</tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
Lớp điền
Ví dụ
<table id="id01">
<tr w3-repeat="customers" class="{{Color}}">
<td>{{CustomerName}}</td>
</tr>
</table>
<script>
w3.displayObject("id01", myObject);
</script>
Điền vào một bảng
Ví dụ
<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>
Điền vào phần tử <select>
Ví dụ
<select id="id01">
<option w3-repeat="x in cars">{{x}}</option>
</select>
<script>
w3.displayObject("id01", {"cars" : ["Volvo", "Ford", "BMW", "Mercedes"]});
</script>
