使用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 了，並且webcomponents-lite是可以接受的polyfill ，那么您可以使用它來保留從Handlebars模板創建的元素。 請參閱我對同一問題的最新解答。