<template> 태그

<template>

	<h1>Hello Block Maker!</h1>
	
	<!-- Handlebars.js 문법으로 컨텍스트 객체 내 property 값에 접근 -->
	<p>{{property.myDescription}}</p>
	
</template>

HTML 및 Handlebars.js 로 작성된 템플릿 예시

<!-- 블록 컨테이너(Block Container) 영역 -->
<div>
	<!-- 템플릿의 HTML은 블록 컨테이너 안에 그려져요. -->
	<h1>Hello Block Maker!</h1>
	
	<p>블록 메이커에 대한 설명이에요.</p>
	
</div>

작성된 템플릿이 웹사이트에 그려진 예시

• 블록의 기본이 되는 HTML 템플릿을 입력할 수 있어요.
• 작성한 HTML 템플릿은 자동으로 블록 컨테이너 내에 그려(Render)져요.
• 일반적인 HTML 문법과 다르게 추가로 Handlebars.js 문법을 지원해요.
• Handlebars.js 문법으로 컨텍스트(Context) 값에 접근해서 동적인 HTML 구성에 활용할 수 있어요.
• 컨텍스트(Context) 값으로 동적인 HTML을 구성하지 않는다면, Handlebars.js 문법 없이 기본적인 HTML 코드만 입력하여 사용해도 괜찮아요.

블록 컨테이너

• 입력한 블록 템플릿을 감싸고 내부에 실제로 그리게 되는 HTML DOM 컨테이너에요.
• 블록 컨테이너는 하나의 블록당 1개만 존재하고, 작성한 HTML 템플릿의 부모(Parent) 컨테이너로 볼 수 있어요.
• <script> 태그 내에서 bm.container 문법을 통해서 블록 컨테이너의 DOM 객체에 접근하여 활용할 수 있어요.