Jade는 Haml보다 html에 훨씬 더 가깝습니다. 따라서 컨텍스트 전환은 실제로 매우 최소화됩니다. 그러나 완전히없는 것은 아닙니다. 개발자에게는 전혀 중요하지 않을 수 있습니다. 그러나 디자이너가 와서 제대로 작동하도록 중첩 된 태그를 얻는 방법을 묻는다면 처음에 생성 한 불필요한 문제를 해결하는 것입니다.
HTML은 여전히 매우 읽기 쉽게 작성 될 수 있으며 부분을 사용하여 더 이해하기 쉽게 만들 수 있습니다. 500 줄의 내용은 읽기 어렵습니다. Jade 또는 HTML입니다.
다음은 Jade 템플릿입니다.
.product-container
.input-group.msB.col-md-5.no-padding
.fnt-light-navyblue.mtB(for='name')
strong Name the sticker
input.full-input(type='text', placeholder='Awesome Batman Sticker')
.clear
.form-group.mmT
label.form-label.fnt-light-navyblue
strong Choose size
.selector-group(ng-repeat="size in sizes", ng-class="{ 'msT': !$first}")
- raw
span.radio
input.radio(name='choose_sticker_size',
ng-model="selectedSize",
type='radio',
value='{{size}}',
id="sticker-{{size}}")
span.fake-radio
label(for='sticker-{{size}}') {{size}} inch
- endraw
// end form-group
.clear
그리고 동등한 HTML
<div class="product-container">
<div class="input-group msB col-md-5 no-padding">
<div for="name" class="fnt-light-navyblue mtB">
<strong>Name the product</strong>
</div>
<input type="text" placeholder="Awesome Batman Sticker" class="full-input" />
</div>
<div class="clear"></div>
<div class="form-group mmT">
<label class="form-label fnt-light-navyblue">
<strong>Choose size</strong>
</label>
<div
class="selector-group"
ng-class="{ 'msT': !$first}"
ng-repeat="size in sizes">
{% raw %}
<span class="radio">
<input
id="sticker-{{size}}"
class="radio"
name="choose_sticker_size"
ng-model="selectedSize"
type="radio"
value="{{ size }}" />
<span class="fake-radio"></span>
</span>
<label for="sticker-{{size}}">{{size}}</label>
{% endraw %}
</div>
</div><!-- end form-group -->
<div class="clear"></div>
</div>
읽기 쉽게 작성했을 때 HTML이 전환을 보증하기 위해 특히 불리한 것으로 보지 않습니다. 물론 꺾쇠 괄호는 눈에 띄지 않습니다. 그러나 내가 도입 한 간접적 인 방법이 html을 깨뜨리고 있는지 디자이너의 의심을 처리하는 것보다 오히려 그것들을 갖고 싶습니다. (그렇지 않을 수도 있습니다. 그러나 그것이 가치있는 노력이 아님을 증명하는 것입니다)