기본 콘텐츠로 건너뛰기

3월, 2014의 게시물 표시

Meteor/handlebars에서 radio/select 다루기

자주쓰지만 은근 귀찮은 것이 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).htmloptions() $("option",select).filter("[value='#{value}']").attr"selected","selected" select.innerHTML 이런 식으로…