Share via

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

  • 아티클

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

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

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

사전 요구 사항

지침

단계 1: 템플릿을 사용할 프로젝트 설정

템플릿을 사용할 프로젝트를 설정하려면 다음 단계를 완료하세요.

Hh700356.wedge(ko-kr,WIN.10).gif

  1. JavaScript를 사용하여 빈 Windows 스토어 앱을 만들고 이름을 TemplateExample로 지정합니다.

  2. default.html 파일의 BODY 요소 내에서 다음과 같이 템플릿용 DIV 요소를 추가하고, ID를 templateDiv로 지정한 다음, **"WinJS.Binding.Template"**의 값을 갖는 data-win-control 특성을 추가합니다.

    <body>
    <div id="templateDiv" data-win-control="WinJS.Binding.Template"></div> 
</body>

    데이터 개체를 정의한 후 다시 돌아가 템플릿의 내부 구조를 추가할 것입니다.

단계 2: 데이터 개체를 정의하여 템플릿의 필드에 바인딩

  1. default.js의 즉시 호출되는 함수 내부에서 몇 가지 필드가 포함된 개체를 선언합니다. 이 경우 모든 속성을 바인딩할 수 있게 하는 WinJS.Binding.define을 사용합니다.

    
(function () {
    "use strict";

    // Other app code ...

    // Define a Person object with bindable properties.
    var Person = WinJS.Binding.define({
        name: "",
        color: "",
        birthday: "",
        petname: "",
        dessert: ""
    });

})();

  2. 템플릿에 이 개체의 필드를 표시하려면, 다음과 같이 데이터 개체의 필드에 해당하는 항목의 목록이 필요합니다. default.html에서 다음 코드를 BODY 태그 내부에 추가합니다.

    <div id="templateDiv" data-win-control="WinJS.Binding.Template">
    <div class="templateItem" data-win-bind="style.background: color">
        <ol>
            <li><span>Name :</span><span data-win-bind="textContent: name"></span></li>
            <li><span>Birthday:</span><span data-win-bind="textContent: birthday"></span></li>
            <li><span>Pet's name: </span><span data-win-bind="textContent: petname"></span></li>
            <li><span>Dessert: </span><span data-win-bind="textContent: dessert"></span></li>
        </ol>
    </div>
</div>

  3. default.html의 템플릿 코드 아래에서 템플릿을 렌더링해야 하는 위치에 DIV 요소를 추가합니다.

    <div id="templateControlRenderTarget"></div>

단계 3: 표시되는 개체 수 제어

이 예에서는 세 개의 Person 개체를 인스턴스화하고, 사용자가 표시할 Person 개체 수를 선택할 수 있도록 드롭다운 목록을 추가합니다.

  1. default.html의 BODY 태그 내부에 다음 코드를 추가합니다.

    <fieldset id="templateControlObject">
    <legend>Pick a name:</legend>
    <select id="templateControlObjectSelector">
        <option value="0">Show one</option>
        <option value="1">Show two</option>
        <option value="2">Show three</option>
    </select>
</fieldset>

  2. default.js에서 즉시 호출되는 익명 함수 내부에 3개 Person 개체로 된 배열을 만듭니다.

    
(function () {
    "use strict";

    // Other app code ...

    // Define a Person 'class' with bindable properties.
    var Person = WinJS.Binding.define({
        name: "",
        color: "",
        birthday: "",
        petname: "",
        dessert: ""
    });

    // Declare an array of People objects.
    var people = [
        new Person({name:"Bob", color:"red", birthday:"2/2/2002", petname:"Spot", dessert:"chocolate cake"}),
        new Person({name:"Sally", color:"green", birthday:"3/3/2003", petname:"Xena", dessert:"cherry pie"}),
        new Person({name:"Fred", color:"blue", birthday:"2/2/2002", petname:"Pablo", dessert:"ice cream"}),
    ];

})();

  3. 3. 이제 드롭다운 선택기의 변경 이벤트에 수신기를 추가합니다. default.js에서 app.onactivated 이벤트 처리기 내부에 다음 코드를 추가합니다.

    app.onactivated = function (args) {

    // Other activation code ...

    var selector = document.querySelector("#templateControlObjectSelector");
          selector.addEventListener("change", handleChange, false); 

}

변경 이벤트 처리기에서 템플릿을 포함하는 DIV 요소 및 데이터 표시 위치를 지정하는 DIV 요소를 선택한 다음 templateDiv 요소의 wincontrol 속성에서 가져올 수 있는 템플릿 컨트롤에서 render를 호출합니다. 템플릿에서 render를 호출하면 데이터 개체의 관련 필드가 템플릿의 목록 항목에 바인딩됩니다.

function handleChange(evt) {
    var templateElement = document.querySelector("#templateDiv");
    var renderElement = document.querySelector("#templateControlRenderTarget");
    renderElement.innerHTML = "";

    var selected = evt.target.selectedIndex;
    var templateControl = templateElement.winControl;

    while (selected >= 0) {
        templateElement.winControl.render(people[selected--], renderElement); 
    } 
}

이제 앱을 빌드 및 디버그할 수 있습니다. 드롭다운 목록에서 항목을 선택하면 앱에 적절한 수의 데이터 개체가 표시됩니다.

단계 4: render에서 DIV를 추가하도록 허용

render 함수에 방금 만든 DIV를 지정할 필요는 없습니다. DIV를 지정하지 않으면 render에서 새 DIV를 만듭니다. 그러나 새 DIV를 DOM에 추가해야 합니다. render의 반환 값은 WinJS.Promise입니다. promise에 대한 자세한 내용은 빠른 시작: promise 사용을 참조하세요. promise의 done 메서드에서 새 DIV를 추가하는 함수를 추가합니다.

이전 단계의 while 블록을 다음과 같이 변경합니다.


    while (selected >= 0) {
        templateElement.winControl.render(people[selected--])
            .done(function (result) {
                 renderElement.appendChild(result);
            });        
    }

설명

다음은 이 항목에 있는 전체 코드 목록입니다.

default.html(Windows)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>TemplateExample</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- TemplateExample references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <div id="templateDiv" data-win-control="WinJS.Binding.Template">
        <div class="templateItem" data-win-bind="style.background: color">
            <ol>
                <li>Name: <span data-win-bind="textContent: name"></span></li>
                <li>Birthday: <span data-win-bind="textContent: birthday"></span></li>
                <li>Pet's name: <span data-win-bind="textContent: petname"></span></li>
                <li>Dessert: <span data-win-bind="textContent: dessert"></span></li>
            </ol>
        </div>
    </div>
    <div id="templateControlRenderTarget"></div>
    <fieldset id="templateControlObject">
        <legend>Pick a name:</legend>
        <select id="templateControlObjectSelector">
            <option value="0">Show one</option>
            <option value="1">Show two</option>
            <option value="2">Show three</option>
        </select>
    </fieldset>
</body>
</html>

default.html(Windows Phone)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>TemplateBinding</title>

    <!-- WinJS references -->
    <link href="/css/ui-themed.css" rel="stylesheet" />
    <script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
    <script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>

    <!-- TemplateBinding references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <div id="templateDiv" data-win-control="WinJS.Binding.Template">
        <div class="templateItem" data-win-bind="style.background: color">
            <ol>
                <li>Name: <span data-win-bind="textContent: name"></span></li>
                <li>Birthday: <span data-win-bind="textContent: birthday"></span></li>
                <li>Pet's name: <span data-win-bind="textContent: petname"></span></li>
                <li>Dessert: <span data-win-bind="textContent: dessert"></span></li>
            </ol>
        </div>
    </div>
    <div id="templateControlRenderTarget"></div>
    <fieldset id="templateControlObject">
        <legend>Pick a name:</legend>
        <select id="templateControlObjectSelector">
            <option value="0">Show one</option>
            <option value="1">Show two</option>
            <option value="2">Show three</option>
        </select>
    </fieldset>
</body>
</html>

default.js(Windows 및 Windows Phone)


(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {

            } else {

            }
       
            // Add event handler to selector. 
            var selector = document.querySelector("#templateControlObjectSelector");
            selector.addEventListener("change", handleChange, false);

            args.setPromise(WinJS.UI.processAll());

        }
    };

    app.start();

    // Define a Person 'class' with bindable properties.
    var Person = WinJS.Binding.define({
        name: "",
        color: "",
        birthday: "",
        petname: "",
        dessert: ""
    });

    // Declare an array of People objects.
    var people = [
        new Person({ name: "Bob", color: "red", birthday: "2/2/2002", petname: "Spot", dessert: "chocolate cake" }),
        new Person({ name: "Sally", color: "green", birthday: "3/3/2003", petname: "Xena", dessert: "cherry pie" }),
        new Person({ name: "Fred", color: "blue", birthday: "2/2/2002", petname: "Pablo", dessert: "ice cream" }),
    ];

    // Update the displayed data when the selector changes.
    function handleChange(evt) {
        var templateElement = document.querySelector("#templateDiv");
        var renderElement = document.querySelector("#templateControlRenderTarget");
        renderElement.innerHTML = "";

        var selected = evt.target.selectedIndex;
        var templateControl = templateElement.winControl;

        while (selected >= 0) {
            templateElement.winControl.render(people[selected--])
                .done(function (result) {
                    renderElement.appendChild(result);
                });        
        }
    }
})();

관련 항목

빠른 시작: ListView 추가

FlipView 컨트롤 추가