Aurelia는 자체 템플릿 언어를 사용하여 HTML 템플릿을 동적으로 생성하고 관리할 수 있는 강력한 프런트엔드 프레임워크입니다. Aurelia 템플릿 언어를 사용하는 방법에 대해 알아보겠습니다.

템플릿 보간(Interpolation)

Aurelia의 템플릿 언어는 mustache 구문 {{}} 을 사용하여 표현식을 HTML에 삽입할 수 있습니다. 이를 통해 JavaScript 변수나 표현식의 결과를 템플릿에 보여줄 수 있습니다.

예를 들어, 다음과 같이 사용할 수 있습니다:

<h1>Welcome, {{username}}!</h1>

이벤트 바인딩

Aurelia 템플릿 언어를 사용하여 이벤트를 처리하고 처리기 함수를 바인딩할 수 있습니다. 이벤트 바인딩은 on 키워드를 사용하여 수행됩니다.

예를 들어:

<button click.delegate="handleClick()">Click me</button>

조건문 및 반복문

Aurelia 템플릿 언어는 if와 repeat 키워드를 사용하여 조건문과 반복문을 표현할 수 있습니다.

<div if.bind="isLoggedIn">
  <p>Welcome back, {{username}}!</p>
</div>

<ul>
  <li repeat.for="item of items">${item}</li>
</ul>

Aurelia의 자체 템플릿 언어를 사용하여 동적이고 상호작용하는 UI를 쉽게 만들 수 있습니다.

자세한 내용은 Aurelia 문서를 참조하세요.