Documents

DocumentsContent

속성과 스타일 바인딩

바인딩

여기서 말하는 바인딩pug 가 제공하는 인라인 스크립트전역변수속성, 인라인 스타일 값을 할당한 것을 말합니다.
tidory.config.js 파일에 다음과 같이 설정되어 있다고 해봅시다.
tidory.config.js

const tidory = require('tidory');
const globalVariable = tidory.GlobalVariable;

globalVariable.register(function(done) {
  done('BLANK', "_blank");
});
globalVariable.register(function(done) {
  done('FONT_SIZE', "12px");
});

속성

다음은 다소 무의미한 예제이지만, 방법을 보여주는 예시입니다. 인라인 스크립트, 전역변수 를 사용하여 속성을 할당합니다.
*.pug

//- inline script
- 
  let URL = 'http://www.tidory.com';
//- template
// <a href="http://www.tidory.com" target="_blank"></a>
a(href=URL, target="@{BLANK}")

스타일

스타일은 pug 에서 기본적으로 JSON 으로 설정하는 것을 지원하고 있습니다. 우리는 여기서 전역변수 만 적절하게 할당하면 됩니다.
*.pug

//- inline script
- 
  let fontColor = 'red';
//- template
// <a style="color:red;font-size:12px;></a>
a(style={"color": fontColor, "font-size": "@{FONT_SIZE}"})