Return 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;

    });

我知道我可以 return html 使用 'Handlebars.SafeString()' 的字符串，但这对我没有用我需要传递 html 对象一些事件分配给它。

可能吗？

Answer 1

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

这是 post-render-bars 的 demo，请查看标题 "Define a jQuery element in a template" 下的示例。

如果需要，助手使用 MutationObserver, here's browser support info, see webcomponents-lite 作为 polyfill。

相关代码的简要说明：

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

jQueryHelpers.js 定义助手 jq。助手使用 watch.forHtml 函数来监视由助手定义的块，并使用 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

Answer 2

存在一个名为 DOMBars 的 fork/extension 车把，正是考虑到了这种功能。

https://github.com/blakeembrey/dombars

它已被作者弃用，但它仍然可用，但您可能会记住，使用已弃用的库可能会在未来出现无法预料的问题。

它的工作原理与 Handlebars 完全一样，除了辅助函数还可以 return DOM 个元素。

您的模板：

<script id="template">
    <p>Something {{{ helper data }}}</p>
</script>

代码：

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

   // Create an input jQuery Object and bind whatever callbacks you want to it.
   var inp = $('<input type="text" name="name">' +  text '</input>');
   
   // Return the DOM Object
   return inp.get(0);
});

template = DOMBars.compile($('#template').html())
const html = template({ data: "Something" })

Return html 来自车把助手的对象

Return html object from handlebars helpers

javascript

jquery

handlebars.js

handlebarshelper

registerhelper