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（）函数`删除'事件处理程序......但只是返回按钮显然也不起作用。 Handlebars helpers应该能够返回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，您可以使用它来获取从Handlebars模板创建的元素。请参阅my answer，了解有关同一事项的最新问题。

使用Handlebars.js助手用jQuery创建活动元素？

2 个答案: