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 요소의 ID(id01)입니다.
두 번째 매개변수는 표시할 데이터 개체(myObject)입니다.
더 큰 개체 표시
W3.JS의 힘을 보여주기 위해 더 큰 JavaScript 개체(myObject)를 표시합니다.
개체는 CustomerName, City 및 Country 속성이 있는 고객 개체의 배열입니다.
마이오브젝트
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> 요소 채우기
예시
<select id="id01">
<option w3-repeat="x in cars">{{x}}</option>
</select>
<script>
w3.displayObject("id01", {"cars" : ["Volvo", "Ford", "BMW", "Mercedes"]});
</script>