如何在浏览器中使用带有普通手柄的手柄助手？

Question

我刚开始使用handlebarsjs，发现了handlebars-helpers：https://github.com/helpers/handlebars-helpers

但我不确定如何在浏览器中使用它。这些示例似乎用于 gulp 文件。我还注意到它确实有一个区域可以让它在浏览器中工作：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);

我对 gulp 和其他前/后处理的东西很陌生。我觉得我错过了一些明显的东西。我需要做什么才能让它发挥作用？

Answer 1

这是我建议的一个例子。在 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);

此时您可能不想更改您的项目，但至少慢慢地从 Handlebars 迁移到 JavaScript 的模板文字可能是个好主意。 Handlebars 有很多限制，您将继续遇到这些限制，并且您需要使用您已经看到的不简单的助手。但是，这段代码都是JS和HTML，你已经知道了。

如需了解更多信息，请访问 Wes Bos' blog、MDN 和 this random gist。