[javascript] Knockout.js에서 사용되는 템플릿 엔진은?

21 Nov 2023

javascript

Mustache 템플릿 엔진을 사용하려면 HTML 템플릿에서 “data-bind” 속성을 사용하고, ViewModel에서 해당 템플릿과 바인딩할 데이터를 정의해야 합니다. Knockout.js는 이러한 바인딩을 자동으로 처리하여 데이터의 변경이 있을 때마다 템플릿을 업데이트하고 화면에 반영합니다.

아래는 Mustache 템플릿 엔진을 사용한 예시입니다.

<!DOCTYPE html>
<html>
<head>
    <title>Knockout.js Template Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
    <h1>Knockout.js Template Example</h1>

    <!-- 템플릿 정의 -->
    <script id="personTemplate" type="text/html">
        <div>
            <h2>Name: {{ name }}</h2>
            <p>Age: {{ age }}</p>
        </div>
    </script>

    <!-- 바인딩할 데이터 -->
    <script>
        var viewModel = {
            name: 'John Doe',
            age: 25
        };

        // Knockout.js를 통해 템플릿과 데이터를 바인딩
        ko.applyBindings(viewModel);
    </script>

    <!-- 템플릿 사용 -->
    <div data-bind="template: { name: 'personTemplate' }"></div>
</body>
</html>

위의 예시에서는 Mustache 템플릿을 정의하기 위해 <script id="personTemplate" type="text/html"> 태그를 사용했습니다. 그리고 템플릿 사용을 위해 <div data-bind="template: { name: 'personTemplate' }"></div> 태그를 사용하여 personTemplate 템플릿을 바인딩하고 있습니다.

Mustache 템플릿 엔진을 사용하면 데이터 바인딩과 템플릿 작성의 편리성을 높일 수 있습니다. Knockout.js에서 제공하는 다른 템플릿 엔진도 사용할 수 있으며, 필요에 따라 정의하여 사용할 수도 있습니다.

참고 자료:

Knockout.js 공식 문서: https://knockoutjs.com/documentation/templating.html