如何在普通的handlebarsjs中使用浏览器中的handlebars-helpers？

问题描述：

我刚开始使用handlebarsjs，发现了关于车把的帮手：https://github.com/helpers/handlebars-helpers 如何在普通的handlebarsjs中使用浏览器中的handlebars-helpers？

但我不确定如何让这个工作在浏览器中。这些例子似乎是用在一个大文件中的。我也注意到它有一个区域让它在浏览器中工作：https://github.com/doowb/handlebars-helpers-browserify-example，并进入工作演示，我看到生成的js它谈到了创建：https://doowb.com/handlebars-helpers-browserify-example/app.js所以我试着把它添加到我的js引用句柄之后：

<script src="~/lib/handlebars/handlebars.js"></script> 
<script src="https://doowb.com/handlebars-helpers-browserify-example/app.js"></script>

但在我的模板中，当我尝试并参考添加{{add @index + 1}}。我在控制台中失去了助手添加错误。这里是我的模板代码：

 var source = $("#questions-template").html(); 
     var template = Handlebars.compile(source); 

     var questionData = JSON.parse('{ "questions":data }'); 
     var html = template(questionData); 
     $("#questions-template-output").html(html);

我很新的吞咽和其他前/后处理的东西。我觉得我失去了一些明显的东西。我需要做些什么来实现这个目标？

我不是故意忽略你的问题，听起来像我比你聪明。我有一个类似的问题，同事建议我使用[template literals]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals），这样比使用第三方模板。也许它会适合你的项目？ –

这是否适用于handlebarsjs？我没有看到能够完成你在文档中链接的内容：http：//handlebarsjs.com/#literals。你能否提供一个例子说明如何使用它在模板内的循环内显示“index + 1”？ – SventoryMang

我所建议的是对于你的项目的一个范式转变，完全远离了把手，并转向了使用HTML的vanilla JS。谷歌'模板文字与把手'和阅读，如果你有兴趣。我必须跑，但今晚晚些时候会回来，并提供更多的信息，如果别人还没有。 –

答

下面是我建议的一个例子。在Chrome控制台或jsfiddle中运行。

let element = document.createElement('div') 
let randomArray = ['help', 'chocolate', 'eagle']; 
let name = window.prompt("What's your name?", "World"); 
// remove the .join() below and see what happens :) 
element.innerHTML = ` 
    <h1>Hi, ${name}! This element is looping</h1> 
    ${randomArray.map((item, i) => ` 
    <div>I am ${item}, item number ${i}</div> 
    `).join('')} 
` 
document.body.append(element);

你可能不希望在这一点上改变你的项目，但它可能是至少慢慢地从把手移到JavaScript的模板文字是一个好主意。把手有许多限制，你会继续遇到，并且你需要把你已经看到的帮手弄得一团糟。但是，这个代码是你已经知道的所有JS和HTML。

欲了解更多信息，这里有Wes Bos' blog，MDN和this random gist。

由于浏览器支持，我不认为这是一个好主意：https：//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals。 IE根本不支持它们，大多数浏览器也不支持它们中的转义序列。 – SventoryMang

@CventoryMang我同意你的观点，我试图清楚地表明，这不是100％做到的，从来没有考虑过其他任何事情，但这取决于你需要什么样的浏览器支持。无论哪种方式，我认为它会越来越普遍，而模板引擎会像jQuery一样褪色（即不完全，但是会有一种离开它的方式），所以熟悉它会有帮助。 –

如何在普通的handlebarsjs中使用浏览器中的handlebars-helpers？

相关推荐