javascript - 从 handlebars 助手返回 html 对象

Question

我需要从 handlebars helper 发送一个 html 对象，如下所示:

    Handlebars.registerHelper('helper', function () {

       //Create an input object
       var inp=$('<input type="text" name="name">');

       //How to return 'inp' object without using Handlebars.SafeString
       return inp;

    });

我知道我可以使用“Handlebars.SafeString()”返回 html 字符串，但这对我没有用，我需要传递 html 对象并为其分配一些事件。

这可能吗？

Answer 1

正如 dandavis 评论的那样，使用 Handlebars 你不能模板化对象，只能是字符串。但是，您可以在使用 MutationObserver 将元素添加到 DOM 后获取元素。我已经创建了一些助手来执行此操作，请参阅 post-render-bars 中的 jq 助手.另见 this answer对于不同方法的类似问题。

这是一个 demo对于后渲染栏，请查看标题“在模板中定义 jQuery 元素”下的示例。

助手使用 MutationObserver , 这里是 browser support信息，请参阅 webcomponents-lite如果需要，可以使用 polyfill。

相关代码简要说明:

watch.js定义一个函数 forHtml(html, callback) 当在 DOM 中遇到给定的 html 时触发回调。它修改 html 以暂时拥有一个使其独一无二的类。

jQueryHelpers.js定义助手 jq。帮助程序使用 watch.forHtml 函数来监视由帮助程序定义的 block ，并使用 jquery 元素作为参数调用您传递给模板的函数。

这是我链接的示例的简化版本，模板:

<p>button with a handler: {{#jq setHandler}}<button>try me</button>{{/jq}}</p>

和js:

var context = {
    setHandler: function(element) {
        element.on('click', function() { 
            alert('clicked');
        });
    }
};
var html = template(context);
// append html somewhere and the setHandler will be invoked