spectrum learns to dig

자주쓰지만 은근 귀찮은 것이 radio와 select다. 특히 최초에 렌더링 할때 선택하게 하는게 번거롭다. #each로 option이나 input에 들어갈 별도의 키를 find의 transform에서 만들거나 아예 fetch를 하거나 array를 조작하거나 하는 건 어렵지 않지만 매번 같은 상황일때마다 코딩을 해야되니까 안 이쁘쟈나. (그렇쟈나 손구락 뿌러지쟈나 카피엔 페이스트 귀찮쟈나 짜증나쟈나!) 물론 checkbox도 귀찮지만 비슷하게 응용하면 될 것이니 handlebars의 block helpers를 사용하여 이 귀찮음을 해결해볼 수 없을까 해서 코드를 만들어보았다. 먼저 select를 해보면 다음과 같은 그림인데 <select>   {{#each array}}   <option value="{{code}}">{{name}}</option>   {{/each}} </select> array중 code가 특정값과 일치하면 selected="selected"가 되도록하려면 간단하게는 option이라는 Helper를 만들어 {{option name code value}}식으로 할 수도 있겠지만 <option> 이라는 객체가 없어지니까 별로 좋지 않다. 그렇다면 특정 블록을 감싸안아서 인자로 받은 값과 같은 option이 있는지 찾아서 수정한 후 대치하면 될 것이다라고 생각. Handlebars . registerHelper "select" , (value, options) -> select = document . createElement ( "div" ) $ ( select ). html options () $ ( "option" , select ). filter ( "[value=' #{ value } ']" )....

Meteor.js 는 기본 템플릿으로 Handlebars 를 사용한다. { 기호가 자전거 핸들처럼 생겨서 그런 이름이라나. 같은 이유로 Mustache 도 { 를 사용한다. 간단하게 사용법을 보자. - 1. Template {{> tempate명 }} <template name=" tempate명 "> ..... </template> - 2. Expression {{ expression }} - 3. Expression with HTML {{{ expression }}} 2와 차이점은 href나 embed 등 html 태그를 사용할 수 있음. - 4. Block - Iteration (expression 이 array 일때) {{#each  expression }} ... {{/each}} - 5. Block - JSON (expression 이 JSON Object 일때) {{#with expression}} ... {{/with}} - 5. Block - Condition (expression 이 참일 때 실행) {{#if  expression }} ... {{else}} ... {{/if}} -6. Helper  {{ helper-name expression }} ex) first name : {{user.firstName}} last name : {{user.lastName}} full name : {{fullName user}} Handlebars.registerHelper('fullName', function(user) {   return user.firstName + ', ' + user.lastName; }); -7. Helper with HTML Handlebars.registerHelper('fullNa...