javascript-从车把帮手返回html对象

我需要从车把帮手发送一个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对象.

可能吗？

解决方法:

就像dandavis所评论的那样,使用把手不能模板对象,只能是字符串.但是,使用MutationObserver将元素添加到DOM后,您可以获得大量元素.我已经创建了一些可以做到这一点的助手,请参见post-render-bars中的jq助手.另请参见this answer,以类似的方式解决不同的问题.

这是post-render-bars的demo,请检查“在模板中定义jQuery元素”标题下的示例.

帮助程序使用MutationObserver,这里是browser support信息,如果需要的话,请参见webcomponents-lite以获取polyfill.

相关代码的简要说明：

watch.js定义了一个用于Html(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