7월 13일에 뷰템플릿 엔진인 Jade의 버전이 0.13으로 올라가면서 Mixin과 Include기능이 추가되었습니다.



Mixin
믹스인은 마치 함수를 사용하는 것처럼 반복되는 패턴을 가진 템플릿을 믹스인으로 정의해서 사용할 수 있고 아래와 같은 형식으로 선언할 수 있습니다.


간단한 예제를 보겠습니다.

// example.jade
mixin jquery(version)
  script(src='http://code.jquery.com/jquery-#{version}.min.js', type='text/javascript')

mixin input(type, id, name, class, text)
  label(for=name) #{text}
  input(type=type, id='input-#{id}', name=name, class=class)

mixin input('text', 'test', 'test', 'textbox', '이름')
mixin input('radio', 'on', 'choose', '', 'On')
mixin input('radio', 'off', 'choose', '', 'Off')
mixin jquery('1.5.2')

위와같이 믹스인을 정의하고 아래에서 믹스인을 사용하면 아래와 같은 html이 만들어집니다.

<label for="test">이름</label>
<input type="text" id="input-test" name="test" class="textbox"/>
<label for="choose">On</label>
<input type="radio" id="input-on" name="choose" class=""/>
<label for="choose">Off</label>
<input type="radio" id="input-off" name="choose" class=""/>
<script src="http://code.jquery.com/jquery-1.5.2.min.js" type="text/javascript"></script>

믹스인 내에서도 동일하게 EL형식으로도 사용할 수 있기 때문에 상황에 따라 필요한경우 변수처럼 쓰거나 #{}를 사용해서 적어주면 됩니다. 서버로 부터 Json형식으로 건네 받은 값들도 파라미터로 넘기지 않더라도 믹스인내에서 사용이 가능합니다.



Include
기존에는 웹프레임워크인 Express에서 View Partials만을 지원하고 있었기 때문에 화면을 조합하는 것은 Express에만 의존했어야 했는데 이제 Jade가 Include기능이 추가됨으로써 훨씬 유연한 화면구성을 할 수 있게 되었습니다.

// util.jade
mixin jquery(version)
  script(src='http://code.jquery.com/jquery-#{version}.min.js', type='text/javascript')

mixin input(type, id, name, class, text)
  label(for=name) #{text}
  input(type=type, id='input-#{id}', name=name, class=class)

// index.jade
include common/util

mixin input('text', 'test', 'test', 'textbox', '이름')
mixin input('radio', 'on', 'choose', '', 'On')
mixin input('radio', 'off', 'choose', '', 'Off').last
mixin jquery('1.5.2')

위와 같이 페이지내에서 사용할 공통적인 템플릿을 믹스인으로 정의해서 별도의 파일로 분리해서 각 jade파일에서 불러서 사용할 수 있습니다.

body
   include layout/header
   div#contents
   include layout/footer

인클루드는 해당파일을 불러와서 불러온 위치에 주입해주는 것이기 때문에 믹스인같은 것 뿐만 아니라 단순 jade파일들도 위처럼 필요한 부분에 따라 분리해서 불러와 사용할 수 있습니다.