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

아티클
12/11/2015

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

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

사전 요구 사항

이 항목에서는 JavaScript로 작성한 기본 Windows 런타임 앱을 만들 수 있다고 가정합니다. 첫 번째 앱을 만드는 방법에 대한 자세한 내용은 JavaScript로 작성된 첫 번째 앱 만들기를 참조하세요.

바인딩 프로젝트 설정

바인딩을 사용할 프로젝트를 설정하려면 다음 단계를 완료하세요.

JavaScript를 사용하여 빈 Windows 런타임 앱을 만들고 BindingApp이라는 이름을 지정합니다.
default.html에서 다음과 같이 바인딩용 DIV 요소를 추가하고, ID를 "basicBinding", 내부 텍스트를 Welcome으로 지정합니다.
```
<body>
    <div id="basicBinding">
      Welcome
    </div>
</body>
```

데이터 바인딩

어떤 종류의 데이터도 HTML 요소에 바인딩할 수 있지만, 여기에서는 이름에 대한 필드가 있는 person 개체를 설정할 것입니다.

경고 HTML 요소의 ID에 데이터를 바인딩하려 하지 마세요.

default.js에서 즉시 호출되는 익명 함수 내의 use strict 지시문 바로 뒤에 다음과 같은 코드 줄을 추가합니다.

(function () {
    "use strict";

    // Create a 'person' object.
    var person = { name: "Fran" };

    // Other app set-up code.
})();

DIV 요소 내에 person.name 필드에 액세스하는 SPAN 요소를 추가합니다.

<div id="basicBinding">
    Welcome, 
    <span id="nameSpan" data-win-bind="innerText: name"></span>
</div>

이름이 나타나게 하려면 WinJS.Binding.processAll을 호출해야 합니다. WinJS.Binding.processAll은 지정된 요소에서 data-win-bind 특성을 찾기 시작한 다음, 해당 요소의 모든 하위 항목을 검색합니다. WinJS.Binding.processAll의 두 번째 매개 변수는 지정된 요소에 삽입할 데이터 컨텍스트를 제공합니다. default.js에서 다음 코드를 app.onactivated 이벤트 처리기 내부에 추가합니다.
```
app.onactivated = function (args) {

    // Other activation code ...

    var personDiv = document.querySelector('#nameSpan');
    WinJS.Binding.processAll(personDiv, person);
}
```
프로젝트를 빌드 및 디버그하면 다음이 표시됩니다.

Welcome, Fran
다음 코드 조각을 고려해보세요.
```
app.onactivated = function (args) {

    // Other activation code ...

    var personDiv = document.querySelector('#nameSpan');
    WinJS.Binding.processAll(personDiv, person);
    var bindingSource = WinJS.Binding.as(person);
}
```
- WinJS 바인딩 시스템은 변경 알림을 적용할, 식별할 수 있는 계층을 사용합니다.
- 데이터 개체를 데이터 컨텍스트로서 processAll에 전달할 경우 WinJS.Binding.as의 호출에 래핑되며, 해당 개체를 위해 이미 만들어진 식별할 수 있는 프록시를 만들거나 해당 프록시와 합류하게 됩니다.
- 이 프록시 계층을 통해 알림이 발생해야 하는 경우를 위해, 알림을 발생시키고 싶은 모든 ‘쓰기'(즉 속성 집합의 쓰기)의 경우, 나중에 WinJS.Binding.as을(를) 통해 식별할 수 있는 프록시와 합류할 수 있습니다.
- 보통 이 작업을 수행하는 가장 쉬운 방법은 식별할 수 있는 프록시를 읽기 및 쓰기 데이터의 개체로 사용하는 것입니다.
- 기본 동작(예: WinJS.Binding.oneTime)을 재정의하거나 확장할 수 없는 개체(예: 고정 또는 WinRT 프로젝션 개체)를 바인딩하기 위해 바인딩 이니셜라이저를 사용할 때 일회성 바인딩이 발생합니다.
기본 데이터가 변경될 때 어떤 일이 발생하는지 보여 주기 위해, 서로 다른 프로세스 또는 내부 데이터 저장소에서 데이터 가져오기를 시뮬레이션하기 위한 단추를 사용할 것입니다. BUTTON 요소를 default.html의 DIV 아래에 추가합니다.
```
<button id="btnGetName">Get name</button>
```

데이터 가져오기를 시뮬레이션하는 모의 메서드를 추가합니다. 이 경우 임의 인덱스를 사용해 배열에서 이름을 가져올 것입니다. default.js에서 단추의 클릭 이벤트를 처리하는 app.onactivated 이벤트 처리기에 다음과 같은 코드를 추가합니다.

document.querySelector("#btnGetName").onclick = function () {
            getName(bindingSource, nameArray);
    }

var nameArray =
        new Array("Sally", "Jack", "Hal", "Heather", "Fred", "Paula", "Rick", "Megan", "Ann", "Sam");

function getName(source, nameArray) {
    source.name = nameArray[randomizeValue()];
}

function randomizeValue() {
    var value = Math.floor((Math.random() * 1000) % 8);
    if (value < 0)
        value = 0;
    else if (value > 9)
        value = 9;
    return value;
}

이 코드를 테스트하기 위해 응용 프로그램을 빌드 및 디버그합니다. Get name 단추를 클릭할 때마다 다른 이름이 표시되는 것을 볼 수 있습니다.

스타일 바인딩

이제 SPAN 요소의 배경색을 바인딩합니다.

default.html에서 style.background 값을 data-win-bind 특성에 추가하고, 해당 바인딩을 person 개체의 색 필드로 설정합니다.
```
<div id="basicBinding">
    Welcome, <span id="nameSpan" data-win-bind="innerHTML: name; style.background: color"></span>
</div>
```
default.js에서 색 필드를 person 개체에 추가합니다.

팁 바인딩 식의 왼쪽에는 요소의 모든 속성과 JavaScript 구문(프로그래밍 방식으로 지정하는 데 사용 가능)을 사용하는 하위 속성이 있습니다.
```
var person = { name: "Fran", color: "red" };
```

또한 default.js의 app.onactivated 이벤트 처리기에서 두 번째 색 배열을 추가하고 이름의 색을 업데이트하도록 getName 함수를 변경합니다.

var colorArray =
    new Array("lime", "lavender", "yellow", "orange", "pink", "greenyellow", "white", "lightblue","lightgreen", "lightyellow");

function getName(source, nameArray, colorArray) {
    source.name = nameArray[randomizeValue()];
    source.color = colorArray[randomizeValue()];
    }

단추에 대한 클릭 이벤트 처리기에서 getName 호출을 변경해야 합니다.

document.querySelector("#btnGetName").onclick = function () {
            getName(bindingSource, nameArray, colorArray);
    }

앱을 빌드 및 디버그하면, Get name 단추를 클릭할 경우 이름과 이름의 색이 모두 업데이트되는 것을 볼 수 있습니다.

요약 및 다음 단계

이 빠른 시작에서는 간단한 JavaScript 개체를 HTML span에 바인딩하는 방법에 대해 알아보았습니다.

더 복합 개체의 바인딩 방법을 알아보려면 복합 개체 바인딩 방법을 참조하세요. 템플릿을 사용하여 여러 개체를 바인딩하려면 템플릿을 사용하여 데이터를 바인딩하는 방법을 참조하세요.

다음을 통해 공유