Documents

DocumentsContent

사용자 정의 디렉티브

사용자 정의 디렉티브

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

Directive

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

Usage

tidory.config.js

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

register(name: string, before: Function, after: Function)

사용자 정의 디렉티브 를 등록합니다. 해당 디렉티브는 템플릿에서 t-* 형태로 사용이 가능합니다. 이 기능의 핵심은 inline script 로 정의된 변수를 넘길 수 있다는 점입니다. t-test=`@{message}, ${frameworks}` 와 같은 방식으로 파라매터를 넘길 수도 있습니다!

Parameter

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

Callback

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

Usage

tidory.config.js

directive.register('test', function(el, value) {
  console.log(value) // Raw String -> @{message}
  // ..before
}, function(el, value) {
  console.log(value) // 'GlobalVariable' value of @{message}
  // ..after
})

Template

*.pug
//- template
div(t-test='@{message}')
  | It's awesome framework for Tistory Skin