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

Posted 2023-03-14

【中文标题】如何在浏览器中使用带有普通手柄的手柄助手？

【英文标题】：How can I use handlebars-helpers in browser with normal handlebarsjs?

【发布时间】：2017-10-19 21:06:30

【问题描述】：

我刚开始使用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 和其他前/后处理的东西很陌生。我觉得我错过了一些明显的东西。我需要做什么才能让它发挥作用？

【问题讨论】：

我不是故意忽略你的问题，听起来我比你聪明。我遇到了类似的问题，一位同事建议我使用template literals，这比使用第 3 方模板要好得多。也许它适用于您的项目？

这对handlebarsjs有用吗？我没有提到能够执行您在文档中链接的内容：handlebarsjs.com/#literals。您能否提供一个示例，说明如何使用它在模板内的循环内显示index + 1？？

我的建议是对您的项目进行范式转变，完全远离把手，转向带有 HTML 的香草 JS。谷歌template literals vs handlebars，如果你有兴趣阅读。我得跑了，但今晚晚些时候会回来，如果其他人还没有，我会提供更多信息。

【参考方案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。

【讨论】：

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

@SventoryMang 我同意你的观点，我试图澄清这不是 100% 做的，也不会考虑其他任何事情，但这取决于你需要什么样的浏览器支持。无论哪种方式，我认为它会越来越普遍，而模板引擎会像 jQuery 一样淡出（即不完全，但会逐渐远离它），所以熟悉它是有帮助的。