Documents

DocumentsContent

리스트 렌더링

리스트 렌더링

리스트 렌더링은 여타 다른 웹 프레임워크에서 지원하듯이 엘리먼트를 반복해서 렌더링합니다. 이미 Pug 에서 기본적인 기능은 제공하지만, 전역변수 를 처리할 수 는 없었습니다. 따라서 전역변수 를 별도로 처리하기 위해 t-for 디렉티브를 제공합니다.

t-for

t-for 디렉티브로 리스트 렌더링을 지시할 수 있습니다. 전역변수 와 같이 사용할 수 있다는 것이 특징이며, 객체를 포함하지 않은 인라인 스크립트 배열도 사용할 수 있습니다. 리터럴 형태로도 사용할 수 있습니다.
API 설정에서 전역변수 설정을 다음과 같이 했다고 가정해봅시다.

tidory.config.js

tidory.config.js
        
globalVariable.register(function(done) {
  done('TIDORY_WITH', [
    'TIDORY',
    'TISTORY'
  ]);
});

globalVariable.register(function(done) {
  done('Frameworks', [
    { framework: ['TIDORY'] },
    { framework: ['TISTORY'] }
  ]);
});
다음과 같이 사용하여 리스트 렌더링을 할 수 있습니다! 이렇게 사용된 리스트 렌더링은 skin.htmlfor 문과 같은 효과를 지닙니다.

Usage

*.pug

div(t-for="item in @{TIDORY_WITH}" title="@{item}") @{item}

skin.html

skin.html
    
<div title="TIDORY">TIDORY</div>
<div title="TISTORY">TISTORY</div>
자바스크립트 표현식도 사용가능하므로 내부에 객체 를 사용할 수도 있습니다.

Usage

*.pug

div(t-for="item in @{Frameworks}") @{item.framework}
t-for 디렉티브는 리터럴 형식으로 사용하는 것도 허용됩니다! 리터럴 내부의 작은 따옴표(')큰 따옴표(") 는 그대로 처리되므로 사용할 필요 없습니다.

Usage

*.pug

div(t-for="item in [TIDORY, TISTORY]") @{item}