Question

我的目标是将所有Handlebars模板放在一个文件夹中，如下所示：

templates/products.hbs
templates/comments.hbs

我通过粗略的Google搜索在一些地方找到了这个代码段，这显然会在外部文件中加载Handlebar模板，这比将一堆模板放在一个索引文件中更有意义。

(function getTemplateAjax(path) {
    var source;
    var template;

    $.ajax({
        url: path, //ex. js/templates/mytemplate.handlebars
        cache: true,
        success: function(data) {
            source    = data;
            template  = Handlebars.compile(source);
            $('#target').html(template);
        }               
    });         
})()

问题是，我不明白这个功能或如何使用它。为什么整个函数包含在括号中然后进行函数调用？例如(function x() { ... })()我不知道这是做什么的。

如果我没有弄错的话，$('#target')看起来像是data的硬编码。此外，这不应该在某处设置function getTemplateAjax(path, target, jsonData) { var source; var template; $.ajax({ url: path, //ex. js/templates/mytemplate.handlebars cache: true, success: function(data) { source = data; template = Handlebars.compile(source); $(target).html(template(jsonData)); } }); }变量，以便模板中引用的变量可以工作吗？似乎正确的功能应该是：

mytemplate.hbs

旁注：如果有人能指出我更好的模板引擎，实际上本身支持外部模板文件，并且比Handlebars组织得更好，我会永远感激。

另一个问题：我实际上无法命名我的文件{{1}}，因为当Ajax调用发生时，它会将其视为二进制文件，并以二进制文件形式出现。我想这是将.hbs的服务器mime类型设置为text / html或text / plain的问题，但问题是这是一个Grunt服务器，我不知道如何更改其mime类型。

Answer 1

代码包含在IIFE（立即调用的函数表达式）中，这意味着该函数立即执行。这就是以下意思：

(function x() {
  console.log('hello');
})();

你也可以这样做：

(function() {
  console.log('hello');
}());

IIFE通常用于为一些代码创建一个“私有”范围，以便它与其他任何东西一起播放（不冲突）。

你提供的第二个功能更有意义，也许第一个功能必须只是一个例子。

Handlebars允许您预编译模板，因此您无需在运行时编译它们。此外，您不必仅为加载模板而发出额外的HTTP请求。

例如，如果我有以下项目结构 - （请注意，我的模型，集合和视图都在 main.js 内，仅适用于此示例和我的所有{{1} }文件在我的根目录）：

.js

我的├── Gruntfile.js ├── handlebars-v2.0.0.js ├── index.html ├── main.js ├── package.json └── templates └── todo.handlebars看起来像这样 - 只是带有Handlebars语法的html：

todo.handlebars

要预编译我的模板，我将在命令行中执行以下操作（您必须首先使用：<h3>{{title}}</h3> <p>Created by: {{author}}</p> 安装把手预编译脚本）：

npm install -g handlebars

现在我的项目结构如下：

> handlebars templates/todo.handlebars -f todo.tpl.js

您将看到我的根目录中添加了├── Gruntfile.js ├── handlebars-v2.0.0.js ├── index.html ├── main.js ├── package.json ├── templates │ └── todo.handlebars └── todo.tpl.js文件。只要扩展名是todo.tpl.js，我就可以将它命名为不同的东西，因为该文件包含有效的JavaScript代码。我也可以指定一个不同的目录来输出它。请记住，.js文件是Backbone View将使用的实际模板。您在todo.tpl.js中编写HTML并将其编译为todo.handlebars。

现在我有todo.tpl.js文件，我可以使用Grunt将所有JS模板文件连接到todo.tpl.js文件中，或者我可以直接在我的HTML中引用每个文件，如下所示：

all_templates.js

在我的Backbone View中，我的 main.js 文件中存在，我会得到这样的模板：

  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="http://documentcloud.github.io/underscore/underscore-min.js"></script>
  <script src="http://documentcloud.github.io/backbone/backbone-min.js"></script>
  <script src="handlebars-v2.0.0.js"></script>
  <script src="todo.tpl.js"></script> <!-- My Template for a Todo item -->
  <script src="main.js"></script>

而且你已经完成了！更多信息：

http://handlebarsjs.com/precompilation.html
https://www.npmjs.org/package/handlebars
http://code.tutsplus.com/tutorials/introduction-to-handlebars--net-27761（阅读有关预编译的内容）

Answer 2

您可以从外部文件中读取模板，无需将html与脚本标记放在一起

$.get('templates/products.hbs', function (data) {
    var template=Handlebars.compile(data);
    $(target).html(template(jsonData));
}, 'html')

Answer 3

我创建了一个简单的插件来实现这一目标。有关此内容的更多信息：https://github.com/miketimmerman/load-template

把手，加载外部模板文件

3 个答案: