Question

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

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

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

然后你可以想象这可以通过所有添加和HTML操作获得多么丑陋。现在这个HTML最终会被包含到一个index.html文件中，该文件具有标准布局，所有其他JS文件最终都会以某种方式导出HTML（使用一些PHP）。我希望能够创建一个单独的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

在Javascript中包含HTML文件

2 个答案: