Sử dụng trình trợ giúp Handlebars.js để tạo các phần tử hoạt động với jQuery?

Question

Có thể trong một trình trợ giúp Handlebars.js để tạo các phần tử bằng cách sử dụng jQuery và đính kèm trình xử lý sự kiện cho chúng không? Tôi muốn có thể tạo ra các yếu tố hoạt động bằng cách sử dụng những người trợ giúp.

Ví dụ:

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

Trong tay lái mẫu tôi nhanh chóng vào nút như thế này:

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

Tôi hiểu rằng đây không thể làm việc, kể từ html của jQuery() chức năng 'loại bỏ các xử lý sự kiện ... nhưng chỉ cần trả lại nút rõ ràng là không hoạt động. Helpbars helpers có thể trả về các nút DOM, nhưng điều này là không thể, phải không? Tôi đã cố gắng trả lại button.get() nhưng không thành công.

Bất kỳ ý tưởng nào?

Answer 1

Điều bạn có thể làm là tạo một hàm bên ngoài registerHelper để được gọi là onClick. Vì vậy, các mã cho rằng sẽ trông như thế này:

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

Bây giờ MutationObserver là more supported và webcomponents-lite là một polyfill chấp nhận cho nó, bạn có thể sử dụng để có được một tổ chức của các yếu tố tạo ra từ tay lái mẫu. Xem my answer cho một câu hỏi gần đây về cùng một điều.