Question

我刚开始使用handlebarsjs并发现了关于把手的帮助：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的模板文字可能是个好主意。把手有很多限制，你将继续遇到，你需要搞砸你已经看到的助手不是直截了当的。但是，这段代码都是JS和HTML，你已经知道了。

有关详细信息，请Wes Bos' blog，MDN和this random gist。

如何在普通车把的浏览器中使用把手 - 助手？

1 个答案: