在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