Utilizzare gli helper di Handlebars.js per creare elementi attivi con jQuery?

Question

È possibile all'interno di un helper di Handlebars.js creare elementi utilizzando jQuery e associare ad essi un gestore di eventi? Mi piacerebbe essere in grado di creare elementi attivi utilizzando gli helper.

Esempio:

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

Nel modello di manubri che istanziare il pulsante in questo modo: la funzione

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

Capisco che questo non può funzionare, in quanto HTML del jQuery() `rimuove il gestore di eventi ... ma semplicemente restituendo il pulsante ovviamente non funziona neanche. Gli helper dei manubri dovrebbero essere in grado di restituire i nodi DOM, ma questo non è possibile, giusto? Ho provato a restituire button.get(), ma senza successo.

Qualche idea?

Answer 1

Quello che potresti fare è creare una funzione al di fuori di registerHelper da chiamare su Click. Quindi il codice per che sarebbe simile a questa:

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

Ora che MutationObserver è more supported e webcomponents-lite è un polyfill accettabile per esso, è possibile utilizzare che per ottenere una sospensione di elementi creati da modelli manubrio. Vedere my answer per una domanda più recente sulla stessa cosa.