W3.JS Hiển thị dữ liệu HTML
Hiển thị dữ liệu trong HTML:
w3.displayObject(selector)
Dễ sử dụng
Chỉ cần thêm dấu ngoặc {{}} vào bất kỳ phần tử HTML nào để dành không gian cho dữ liệu của bạn:
Thí 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:
Thí 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 để 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 CustomerName, City và 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"}
]};
Điền vào một menu thả xuống
Thí dụ
<select id="id01">
<option
w3-repeat="customers">{{CustomerName}}</option>
</select>
<script>
w3.displayObject("id01", myObject);
</script>
Điền vào danh sách
Thí 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 bạn đư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 bao gồm 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ó trong một 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 ():
Thí dụ
<div w3-include-html="list.html"></div>
<script>
w3.includeHTML(myCallback);
function myCallback() {
w3.displayObject("id01", myObject);
}
</script>
Làm đầy hộp kiểm tra
Thí 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>
Điền lớp
Thí 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 Bàn
Thí 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 phần tử <select>
Thí dụ
<select id="id01">
<option w3-repeat="x in cars">{{x}}</option>
</select>
<script>
w3.displayObject("id01", {"cars" : ["Volvo", "Ford", "BMW", "Mercedes"]});
</script>