Handlebars.js 헬퍼를 사용하여 jQuery로 활성 요소를 생성 하시겠습니까?

Question

Handlebars.js 도우미에서 jQuery를 사용하여 요소를 만들고 이벤트 처리기를 첨부 할 수 있습니까? 헬퍼를 사용하여 활성 요소를 만들 수 있기를 바랍니다.

예 : 핸들 템플릿에서

Handlebars.registerHelper("button", function(title) { 
    var button = $('<button>').text(title); 
    button.click(function() { 
     alert("Button " + title + " clicked."); 
    }); 
    return $('<div>').append(button).html(); 
}); 

이 같은 버튼을 인스턴스화 :

{{{button "Click Me!"}}} 

내가이 일을 할 수없는 것을 이해는 jQuery의 HTML 이후() 함수는` '를 제거 이벤트 처리기 ...하지만 단순히 버튼을 반환하는 것은 분명히 작동하지 않습니다. 핸들 막대 도우미가 DOM 노드를 반환 할 수 있어야하지만 이는 불가능합니다. 맞습니까? 나는 button.get()을 반환하려했지만 성공하지 못했습니다.

아이디어가 있으십니까?

Answer 1

당신이 할 수있는 일은 registerHelper 외부에서 onClick이라는 함수를 생성하는 것입니다. 그래서에 대한 코드는 다음과 같습니다

Handlebars.registerHelper("button", function (text) { 
    var button = $('<button></button>').text(text).attr('onclick', 'button_clickEvent()'); 
    return $('<div></div>').append(button).html(); 
}); 

var button_clickEvent = function() { 
    alert("Button " + $(this).text() + " clicked."); 
}; 

Answer 2

는 이제 MutationObserver이 more supported 및 webcomponents-lite 그것을 위해 허용 polyfill입니다, 당신은 핸들 바 템플릿에서 생성 된 요소를 잡아 그것을 사용할 수 있습니다. 동일한 문제에 대한보다 최근의 질문은 my answer을 참조하십시오.