다음을 통해 공유


데이터 바인딩(HTML)

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

목적

데이터 바인딩을 사용하면 앱의 요소를 데이터베이스, 파일, 내부 개체 등 서로 다른 데이터 원본과 동기화할 수 있습니다.

이 조항의 내용

항목 설명

빠른 시작: 데이터 및 스타일 바인딩

JavaScript용 Windows 라이브러리 바인딩을 사용해 데이터 및 스타일을 HTML 요소에 바인딩할 수 있습니다. WinJS를 사용한 바인딩은 기본적으로 단방향입니다. 즉, 데이터 및 스타일 값이 변경되면 HTML 요소가 업데이트되지만 HTML 요소가 변경되면 데이터가 업데이트되지 않습니다. 이 빠른 시작에서는 가장 기본적인 바인딩 종류, 즉 데이터만 포함하는 간단한 개체에 대한 선언적인 바인딩을 보여 줍니다. 고급 바인딩 종류에 대한 자세한 내용은 복합 개체 바인딩 방법템플릿을 사용하여 데이터를 바인딩하는 방법을 참조하세요.

복합 개체를 바인딩을 만드는 방법

대부분의 경우 앱에서 복합 개체, 특히 앱의 UI에서 제어할 수 없는 프로세스를 관리하는 개체에 바인딩하려고 합니다. 이 항목에서는 이름 및 색을 포함하는 개체에서 데이터를 표시하는 앱을 작성하는 방법에 대해 설명하며, 기본적으로 빠른 시작: 데이터 및 스타일 바인딩과 동일합니다. 이 경우 개체는 변경을 트리거하는 단추에 반응하는 대신 변경 프로세스 자체를 관리합니다.

템플릿을 사용하여 데이터를 바인딩하는 방법

JavaScript용 Windows 라이브러리 템플릿을 사용하면 편리하게 여러 데이터 인스턴스를 표시하고 서식을 지정할 수 있습니다. 이러한 템플릿을 ListViewFlipView 개체와 함께 사용하여 템플릿이 표시되는 방식을 지정할 수 있습니다. 미리 정의된 보기를 사용하지 않고 한 데이터 개체의 여러 인스턴스를 바인딩하기 위해 템플릿을 사용할 수도 있습니다. ListView과 함께 템플릿을 사용하는 데 대한 자세한 내용은 빠른 시작: ListView 추가를 참조하세요. FlipView와 함께 템플릿을 사용하는 데 대한 자세한 내용은 FlipView 컨트롤 추가를 참조하세요. 다음 절차에서는 배열에서 템플릿을 사용하는 방법을 보여 줍니다.

템플릿을 WinJS 컨트롤로서 선언적으로 정의하고 내부 구조와 스타일을 지정할 수 있습니다. DIV 요소로 선언하더라도 템플릿은 DOM의 일부로 처리되지 않으며 DOM 검색 결과의 일부로 반환되지 않습니다. 템플릿이 나타날 DIV 요소를 지정하거나 render 메서드가 자체 DIV 요소를 만들도록 할 수 있습니다. 이 항목에서는 템플릿을 사용하여 바인딩 가능한 여러 데이터 개체를 하나의 DIV 요소로 바인딩하는 방법을 보여 줍니다. 사용자는 드롭다운 목록에서 항목을 선택하여 표시할 개체의 수를 선택합니다.

 

대상 개발자 그룹

이 섹션은 앱에 다양한 종류의 데이터를 표시하려는 JavaScript로 작성한 Windows 런타임 앱 개발자를 대상으로 설계되었습니다.