데이터 바인딩(HTML)
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
목적
데이터 바인딩을 사용하면 앱의 요소를 데이터베이스, 파일, 내부 개체 등 서로 다른 데이터 원본과 동기화할 수 있습니다.
이 조항의 내용
| 항목 | 설명 |
|---|---|
JavaScript용 Windows 라이브러리 바인딩을 사용해 데이터 및 스타일을 HTML 요소에 바인딩할 수 있습니다. WinJS를 사용한 바인딩은 기본적으로 단방향입니다. 즉, 데이터 및 스타일 값이 변경되면 HTML 요소가 업데이트되지만 HTML 요소가 변경되면 데이터가 업데이트되지 않습니다. 이 빠른 시작에서는 가장 기본적인 바인딩 종류, 즉 데이터만 포함하는 간단한 개체에 대한 선언적인 바인딩을 보여 줍니다. 고급 바인딩 종류에 대한 자세한 내용은 복합 개체 바인딩 방법 및 템플릿을 사용하여 데이터를 바인딩하는 방법을 참조하세요. |
|
대부분의 경우 앱에서 복합 개체, 특히 앱의 UI에서 제어할 수 없는 프로세스를 관리하는 개체에 바인딩하려고 합니다. 이 항목에서는 이름 및 색을 포함하는 개체에서 데이터를 표시하는 앱을 작성하는 방법에 대해 설명하며, 기본적으로 빠른 시작: 데이터 및 스타일 바인딩과 동일합니다. 이 경우 개체는 변경을 트리거하는 단추에 반응하는 대신 변경 프로세스 자체를 관리합니다. |
|
JavaScript용 Windows 라이브러리 템플릿을 사용하면 편리하게 여러 데이터 인스턴스를 표시하고 서식을 지정할 수 있습니다. 이러한 템플릿을 ListView 및 FlipView 개체와 함께 사용하여 템플릿이 표시되는 방식을 지정할 수 있습니다. 미리 정의된 보기를 사용하지 않고 한 데이터 개체의 여러 인스턴스를 바인딩하기 위해 템플릿을 사용할 수도 있습니다. ListView과 함께 템플릿을 사용하는 데 대한 자세한 내용은 빠른 시작: ListView 추가를 참조하세요. FlipView와 함께 템플릿을 사용하는 데 대한 자세한 내용은 FlipView 컨트롤 추가를 참조하세요. 다음 절차에서는 배열에서 템플릿을 사용하는 방법을 보여 줍니다. 템플릿을 WinJS 컨트롤로서 선언적으로 정의하고 내부 구조와 스타일을 지정할 수 있습니다. DIV 요소로 선언하더라도 템플릿은 DOM의 일부로 처리되지 않으며 DOM 검색 결과의 일부로 반환되지 않습니다. 템플릿이 나타날 DIV 요소를 지정하거나 render 메서드가 자체 DIV 요소를 만들도록 할 수 있습니다. 이 항목에서는 템플릿을 사용하여 바인딩 가능한 여러 데이터 개체를 하나의 DIV 요소로 바인딩하는 방법을 보여 줍니다. 사용자는 드롭다운 목록에서 항목을 선택하여 표시할 개체의 수를 선택합니다. |
대상 개발자 그룹
이 섹션은 앱에 다양한 종류의 데이터를 표시하려는 JavaScript로 작성한 Windows 런타임 앱 개발자를 대상으로 설계되었습니다.