사용자 정의 디렉티브

사용자 정의 디렉티브

내장된 디렉티브 이외에 사용자 정의 디렉티브 를 정의할 수 있습니다. 이미 정의된 내장 디렉티브를 중복 정의하는 경우, 우선시 적용 되고, 그 이후에 내장 디렉티브가 적용됩니다. 해당 API는 tidory.config.js 에서 사용합니다.

Directive

디렉티브 객체는 디렉티브를 관리하는 단일 객체 입니다. 현재까지는 디렉티브를 등록하는 기능만 제공합니다.

Usage

tidory.config.js

const tidory = require('tidory');
const directive = tidory.Directive;

register(name: string, callback: Function)

사용자 정의 디렉티브 를 등록합니다. 해당 디렉티브는 템플릿에서 t-* 형태로 사용이 가능합니다. 이 기능의 핵심은 inline script 로 정의된 변수를 넘길 수 있다는 점입니다.

Parameter

  • name: string - 디렉티브의 이름
  • callback: Function - 전역변수가 처리된 이후에 호출될 콜백

Callback

  • el: JQuery Element - 함수가 호출된 엘리먼트
  • value: Array - 디렉티브에 설정된 값

Usage

tidory.config.js

directive.register('test', function(el, params) {
  /**
   [ 'it\'s awesome framework for Tistory Skin',
    'TISTORY',
    'NAVER',
    'BLOGGER',
    'GITHUB.IO' ] 
  */
  console.log(params);
})
t-test=`${message}` 와 같은 방식으로 파라매터를 넘길 수 있습니다! 또한 , 를 구분자로 다중 파라매터를 넘길 수 있습니다.

Template

*.pug
        
//- inline script
-
  const 
    message = "it's awesome framework for Tistory Skin",
    blogs = [
      'TISTORY',
      'NAVER',
      'BLOGGER',
      'GITHUB.IO'
    ]
  ;
//- template        
p(t-test=`${message}, ${blogs}`)