블록 메이커

<style> h1 { color: red; font-size: 24px; } </style> <template> <h1>안녕 블록 메이커!</h1> <ul> <li>제목 색상: red</li> <li>제목 사이즈: 24px</li> </ul> <button>설명 보기</button> </template> <script> const container = bm.container; const context = bm.context; function clicked(e) { e.preventDefault(); if (e.target.matches('button')) { alert(`제목 색상은 red이고 사이즈는 24px 이에요!`); } } container.addEventListener('click', clicked, true); </script>

{ "property": { "myHelloPhrase": "🖐🏻", "myColor": "blue", "myFontSize": 36, } }

<style> h1 { color: {{property.myColor}}; font-size: {{property.myFontSize}}px; } </style> <template> <h1>{{property.myHelloPhrase}} 블록 메이커!</h1> <ul> <li>제목 색상: {{property.myColor}}</li> <li>제목 사이즈: {{property.myFontSize}}px</li> </ul> <button>설명 보기</button> </template> <script> const container = bm.container; const context = bm.context; function clicked(e) { e.preventDefault(); if (e.target.matches('button')) { const myColor = context.property.myColor; const myFontSize = context.property.myFontSize; alert(`제목 색상은 ${myColor}이고 사이즈는 ${myFontSize}px 이에요!`); } } container.addEventListener('click', clicked, true); </script>

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

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

<!-- Good --> <script> // bm, bm.context 와 별도로 필요한 변수를 관리하고 사용 let myCounter = 0; bm.container.addEventListener('click', e => { e.preventDefault(); myCounter = myCounter + 1; }); </script> <!-- Bad --> <script> // bm.context에 변수를 할당하고 사용 bm.context.myCounter = 0; bm.container.addEventListener('click', e => { e.preventDefault(); bm.context.myCounter = bm.context.myCounter + 1; }); </script>

<!-- Good --> <script> bm.container.innerHTML = '<h1>안녕하세요!</h1>'; // 블록 컨테이너에 DOM 이벤트를 위임하고 분기 bm.container.addEventListener('click', e => { e.preventDefault(); if (e.target.matches('h1')) { alert('<h1> 태그가 클릭되었어요.'); } }, true); // 1초 뒤 <h1> 태그를 새로 생성 setTimeout(() => { bm.container.innerHTML = '<h1>☺️클릭하면 창이 떠요!</h1>'; }, 1000); </script> <!-- Bad --> <script> bm.container.innerHTML = '<h1>안녕하세요!</h1>'; // 블록 컨테이너에 그려진 HTML 요소에 직접 DOM 이벤트를 바인딩 const h1 = bm.container.querySelector('h1'); h1.addEventListener('click', e => { e.preventDefault(); alert('<h1> 태그가 클릭되었어요.'); }); // 1초 뒤 <h1> 태그를 새로 생성 setTimeout(() => { bm.container.innerHTML = '<h1>😢클릭해도 창이 안떠요...</h1>'; }, 1000); </script>

<style> h1 { /* 사용자가 블록의 설정 값(property.myColor)을 에디터에서 변경하면 프리뷰에 자동 반영돼요. */ color: {{property.myColor}}; } </style> <template> <!-- 사용자가 블록의 설정 값(property.myHelloPhrase)을 에디터에서 변경하면 프리뷰에 자동 반영돼요. --> <h1>{{property.myHelloPhrase}} 블록 메이커!</h1> <p></p> </template> <script> const container = bm.container; const context = bm.context; const p = container.querySelector('p'); // 처음 한 번은 반영되지만, 사용자가 블록의 설정 값(property.myContents)을 에디터에서 변경해도 자동 반영되지 않아요. p.innerHTML = context.property.myContents; </script>

... <script> const container = bm.container; const context = bm.context; const p = container.querySelector('p'); // 최초 실행시 설정 값(property.myContents)을 반영 p.innerHTML = context.property.myContents; // 이후 사용자가 블록의 설정 값(property.myContents)을 변경한 경우 반영 처리 bm.onContextChange = () => { const p = container.querySelector('p'); p.innerHTML = context.property.myContents; }; </script>

{{property.mySetting}} {{property.myNested.mySetting}}

<style> {{#if property.showWelcome}} p { color: green; } {{/if}} </style> <template> {{#if property.showWelcome}} <p>만나서 반가워요!</p> {{else}} <p>인사는 생략할게요...</p> {{/if}} </template>

{ "property": { "items": [ { "name": "사과" }, { "name": "바나나" }, { "name": "파인애플" } ] } }

<template> <ul> {{#each property.items}} <li> {{#if @first}} <strong>[첫 항목]</strong> {{/if}} {{#if @last}} <strong>[마지막 항목]</strong> {{/if}} {{@index}}: {{name}} </li> {{else}} <li>표시할 항목이 없어요.</li> {{/each}} </ul> </template>