spectrum learns to dig

Template events안에서 function을 쓸 때 global scope 으로 쓰는 게 싫으셨죠? var clickProcess = function(e) { ... }; Template.nono.events({ 'click .button': function(e, tmpl) { clickProcess(e); ... }, 'touchend .button': function(e, tmpl) { clickProcess(e); ... } }); 이렇게 쓰지 말고 Template.nono scope 안으로 가둡시다. Template.nono.clickProcess = function(e) { ... } 그러고 나서 event 안에선 tmpl.view.template 으로 참조하면 Template.nono 자신을 가져올 수 있습니다! Template.nono.events({ 'click .button': function(e, tmpl) { tmpl.view.template.clickProcess(e); ... }, 'touchend .button': function(e, tmpl) { tmpl.view.template.clickProcess(e); ... } }); 더 이상 글로벌 스코프로 인한 불안에 떨지마세요~

자주쓰지만 은근 귀찮은 것이 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 } ']" )....