从handlebars助手返回html对象 [英] Return html object from handlebars helpers

问题描述

  Handlebars.registerHelper（'helper'，function（ ）{
 
 //创建一个输入对象
 var inp = $（'< input type =textname =name>'）; 
 
 //如何在不使用Handlebars.SafeString 
 return inp; 
 
}）的情况下返回'inp'对象; 
  

我知道我可以使用'Handlebars.SafeString（）'返回html字符串，但这不是

是否有可能？

解决方案

正如dandavis评论的那样，使用Handlebars不能模板对象，只能是字符串。但是，使用MutationObserver将这些元素添加到DOM后，您可以获取元素。我已经创建了一些帮助程序来完成此操作，请参阅 jq 帮助程序rel =nofollow noreferrer>后期渲染栏。另请参阅此答案，以获得针对其他方法的类似问题。

以下是 演示 for post-render-bars，检查标题为在模板中定义jQuery元素下的示例。

帮助程序使用 MutationObserver ，这里是浏览器支持信息，请参阅 webcomponents-lite 了解polyfill如果需要的话。

相关代码的简要描述：

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

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

以下是我链接的范例的简短版本：template ：

 < ;带有处理程序的p>按钮：{{#jq setHandler}}<按钮>尝试我< /按钮> {{/ jq}}< / p> 
  

和js：

  var context = {
 setHandler：function（element）{
 element.on（'click'，function（）{
 alert（'clicked'）; 
}）; 
} 
}; 
 var html = template（context）; 
 //在某处追加html，setHandler将被调用
  

I need to send an html object from handlebars helper as follow:

    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;

    });

I understand that I can return html string using ‘Handlebars.SafeString()’, however this is not useful to me I need to pass html object with some event assign to it.

Is it possible?

解决方案

As dandavis commented, using Handlebars you can't template objects, only strings. However, you can get a hold of elements after they've been added to the DOM using MutationObserver. I've created some helpers that do just this, see the jq helper in post-render-bars. See also this answer to a similar question for a different approach.

Here's a demo for post-render-bars, check the example under the heading "Define a jQuery element in a template".

The helper uses MutationObserver, here's browser support info, see webcomponents-lite for a polyfill if needed.

Brief description for the relevant code:

watch.js defines a function forHtml(html, callback) which triggers a callback when the given html is encountered in the DOM. It modifies the html to temporarily have a class that makes it unique.

jQueryHelpers.js defines the helper jq. The helper uses the watch.forHtml function to watch for the block defined by the helper and calls the function you passed in to the template with the jquery element as an argument.

Here's a shortened version of the example I linked, template:

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

And 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

这篇关于从handlebars助手返回html对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！