3

我需要从车把助手发送一个 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 对象并为其分配一些事件。

可能吗？

4

2 回答 2

3

正如 dandavis 评论的那样，使用 Handlebars 您不能模板对象，只能模板字符串。但是，您可以在使用 MutationObserver 将元素添加到 DOM 后获取它们。我已经创建了一些可以做到这一点的jq助手，请参阅post-render-bars中的助手。另请参阅this answer to a similar question了解不同的方法。

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

助手使用MutationObserver，这是浏览器支持信息，如果需要，请参阅webcomponents-lite以获取 polyfill。

相关代码的简要说明：

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

jQueryHelpers.js定义了 helper 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
于 2015-12-22T11:42:13.763 回答
0

存在一个名为 DOMBars 的 Handlebars 的分支/扩展，正是考虑到了这种功能。

https://github.com/blakeembrey/dombars

作者已弃用它，但它仍然可用，尽管您可能要记住，使用已弃用的库可能会在未来出现不可预见的问题。

它的工作原理与 Handlebars 完全一样，除了辅助函数还可以返回 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" })
于 2020-08-25T15:09:06.563 回答