기본 콘텐츠로 건너뛰기

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 ). html options () $ ( "option" , select ). filter ( "[value=' #{ value } ']" ).