Question

例如，假设我有一个名为main.handlebars的HandleBars模板，如下所示：

<html>
<head></head>
<body>
<div> {{ html1 }} </div>
<div> {{ html2 }} </div>
<div> {{ html3 }} </div>
</body>

然后我有html1.html：

<p1>Blah</p1>

html2.html：

<p1>Blah</p1>

html3.html：

<p1>Blah</p1>

加载html1.html，html2.html和html3.html以及将它们传递给main.handlebars模板的正确方法是什么？

Answer 1

您可能需要提供有关您要实现的目标的更多信息。

但是，通常在使用像Handlebars或Mustache这样的客户端模板库时，您将首先编译模板，然后将数据对象传递给已编译的模板函数。

使用上面的示例：

<body>
<div> {{ html1 }} </div>
<div> {{ html2 }} </div>
<div> {{ html3 }} </div>
</body>

您首先要编译模板：

var template = Handlebars.compile(document.querySelector('body').innerHTML);

然后使用数据对象或模型输出结果：

var output = document.querySelector('.output');
output.innerHTML = template(data);

我在这里创建了一个简单的工作示例：http://codepen.io/chrsr/pen/ZQvgEx

如果您正在尝试做的是使用内容为<p1>blah</p1>的“html”文件，则需要通过模板库将这些文件转换为可读格式。

注意：<p1>不是有效的HTML元素，这些元素来自哪里？

为此，您可以使用以下内容：http://codepen.io/chrsr/pen/PZEMZz?editors=1010 - 将<p1>blah</p1>数据操作到JS对象的简单示例。

我已经解释了像Handlebars这样的模板库的基本概念，但是如果你的答案不同，我建议你设置一个CodePen演示或在你的问题中提供更多信息。