Question

我需要从把手助手发送一个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了解填充。

相关代码的简要说明：

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

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的把手的派生/扩展，牢记这种功能。

https://github.com/blakeembrey/dombars

它已被作者弃用，但仍然可以使用，尽管您可能会记住，使用已弃用的库可能会遇到无法预料的问题。

除了辅助功能也可以返回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" })

从车把助手返回html对象

2 个答案: