在Javascript中包含HTML文件

Question

我知道这是一个已解决的问题，这个问题听起来可能很愚蠢，但我来自后端，移动和底层开发的背景。

我正在开发JS应用程序（纯JS，没有框架，但结构非常好）。 该应用程序唯一的问题是所有HTML都是用Javascript编写的。 因此，它看起来像：

$div = ('<div>Hello</div>');

然后，您可以想象所有添加和HTML操作会带来多么丑陋的效果。 现在，此HTML最终最终被包含在具有标准布局的index.html文件中，所有其他JS文件最终都会以某种方式（使用某些PHP）将其HTML导出。 我希望能够创建一个单独的HTML文件，并让JS文件使用该文件。 我该怎么办？ 我通常知道问题是相反的：在HTML中，获取JS /模板。 但是在这个应用程序的情况下，这不是问题。

使用我目前使用的应用程序，是否可以使用Handlebars或Underscore或类似的方法将HTML写入HTML文件并将其包含在Javascript中？ 我知道这可能需要进行一些预编译，但这不是问题。

Underscore和Handlebars上的示例仅显示按照我上面的方式编写的简单HTML示例。 在线示例显示了如何使用Javascript模板HTML，但并非完全是我想要的。

任何人有任何建议或可以帮助吗？

Answer 1

我认为您可以使用JQuery的$ .ajax（）方法轻松地做到这一点。 这是一个例子：

$.ajax({
    type: "GET",
    url: "/templates/something.html",
    dataType: "xml",
    success: function (xml) {
        $div = xml;
        console.log('Loaded HTML: ', xml);
    }
});

Answer 2

车把可以满足您的需求，而且使用起来非常简单！

让我们举一个简单的例子（摘自车把网站）。 假设这是您的HTML：

<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>

您所要做的就是将其放入文件中（我们将其html.handlebars ），然后在脚本标签中引用该文件：

<script id="html-template" type="text/x-handlebars-template" src="./html.handlebars"/>

然后，您可以使用Javascript创建模板：

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

然后从模板生成HTML：

var context = {title: "My New Post", body: "This is my first post!"}
var html    = template(context);

此时html将是：

<div class="entry">
  <h1>My New Post</h1>
  <div class="body">
    This is my first post!
  </div>
</div>

您可以像使用其他任何html字符串一样使用它（例如： $(html).appendTo('body') ）。

您可以根据需要制作任意数量的车把模板，大小从如上所述的整页到小片段不等。

如果性能成为问题，您也可以考虑进行预编译： http : //handlebarsjs.com/precompilation.html