템플릿 함수를 만드는 방법(HTML)

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

ListView에 대해 항목을 생성하는 템플릿 함수를 만드는 방법을 알아봅니다.

알아야 할 사항

기술

• JavaScript를 사용한 Windows 스토어 앱
• JavaScript용 Windows 라이브러리

사전 요구 사항

• 여기서는 WinJS 컨트롤을 사용하는 JavaScript로 작성된 기본 Windows 스토어 앱을 만들 수 있다고 가정합니다. WinJS 컨트롤 시작에 대한 자세한 내용은 빠른 시작: WinJS 컨트롤 및 스타일 추가를 참조하세요.

지침

단계 1: 템플릿 함수 정보

태그에서 항목 템플릿을 정의하는 대신 각 목록 항목을 렌더링하는 함수를 만들 수 있습니다. 렌더 함수는 다음 매개 변수를 사용합니다.

object renderItem(itemPromise, recycledElement)

• itemPromise: 항목이 렌더링할 데이터에 대한 IItemPromise. 동기 데이터 원본을 사용할 경우 일반적으로 IItemPromise가 완료되지만, 비동기 데이터 원본이라면 나중에 어느 시점에 완료될 수 있습니다.

• recycledElement : 새 콘텐츠를 표시하기 위해 다시 사용할 수 있는 이전 항목의 DOM입니다. 이 매개 변수는 옵션입니다.

  요소 재활용을 사용할 경우:

  • 재활용된 요소를 자리 표시자로 사용하기 전에 기존 항목의 정보를 지웁니다. 재활용을 사용하는 경우 이전 항목에 항목이 마지막으로 사용된 시기의 이전 데이터와 상태가 포함되어 있을 가능성이 큽니다. 재활용된 요소를 다시 사용하기 전에 상태를 지우거나 숨깁니다.

    예를 들어 템플릿에 사진이 포함되어 있고 img 요소를 다시 사용하지만 새 URL이 아직 없는 경우 이전 데이터의 사진이 포함될 수 있으므로 불투명도를 0으로 설정하여 img를 숨깁니다. 새 사진의 URL이 있으면 img 요소를 업데이트하고 불투명도를 다시 1로 변경할 수 있습니다.

  • 항목의 HTML이 항목 데이터 기준 조건부 상태를 갖는 경우 재활용할 때 반드시 항목을 다시 설정해야 합니다.

  • 요소를 재활용할 때 DOM의 구조 변경을 최소화하세요. recycledElement가 재사용하기에 적합하지 않은 경우에는 이 요소를 무시하고 새 요소를 처음부터 만듭니다. recycledElement는 가비지로 수집됩니다.

  경고  ListView는 recycledElement의 구조를 변경할 수 있으므로 액세스하기 전에 항상 자식 요소가 있는지 테스트합니다.

   

렌더 함수는 다음 중 하나를 반환해야 합니다.

• 항목에 대한 DOM 트리의 루트 요소.

• 다음 속성이 포함된 개체:

  • element: 항목에 대한 DOM 트리의 루트 요소 또는 완료 시 항목의 루트 요소를 반환한다는 promise
  • renderComplete: 항목이 완전히 렌더링될 때 완료되는 Promise.

단계 2: 간단한 렌더링 함수 만들기

이 예제에서는 templateFunctionListView라는 ListView를 검색하고 각 데이터 항목의 title, text 및 picture를 표시하는 항목 템플릿 함수를 사용하여 itemTemplate 속성을 설정합니다.

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll().then(function () {
                var lView = document.getElementById("templateFunctionListView").winControl;
                lView.itemTemplate = itemTemplateFunction;

            }));

        }
    };

   function itemTemplateFunction(itemPromise) {

       return itemPromise.then(function (item) {
           var div = document.createElement("div");

           var img = document.createElement("img");
           img.src = item.data.picture;
           img.alt = item.data.title;
           div.appendChild(img);

           var childDiv = document.createElement("div");

           var title = document.createElement("h4");
           title.innerText = item.data.title;
           childDiv.appendChild(title);

           var desc = document.createElement("h6");
           desc.innerText = item.data.text;
           childDiv.appendChild(desc);

           div.appendChild(childDiv);
           
           return div;
       });
    };

설명

추가 예제는 ListView 항목 템플릿 샘플을 참조하세요.

관련 항목

ListView 항목 템플릿 샘플