Backbone.js 主干/把手模板组织/包括

我正在做一个backboneJS/HandlebarsJS单页项目，我有点像一个有主干的noob（我通常使用AngularJS）。我希望将每个模板（页眉、侧边栏、页脚、内容）保存在单独的文件中，以供组织使用

我读过一些帖子，上面说你应该将模板保存在单独的文件中进行开发，然后将它们合并到一个文件中进行生产。我非常确定它们将是.html文件，但我不确定将它们与什么工具组合

从文件加载模板的正确方法是什么？我是否将这些文件合并为一个文件并导入？是否有一种工具可以更轻松地完成此操作？

如果你有一个教程，解释了适当的结构，这将是伟大的

---

请，谢谢

把手模板通常以编译（=JavaScript）的形式提供，这大大提高了性能。为了正确地执行此操作，使用诸如和任务之类的构建工具非常有意义。它从所有模板中生成一个JavaScript文件，并在默认情况下将模板存储在全局

JST

对象中，因此您可以这样使用它：

Backbone.View.extend({
    template: JST['mytemplate.hbs'],
    render: function () {
        this.$el.html(this.template());
    }
});

Backbone.View.extend({
    template: require('../templates/mytemplate.hbs'),
    render: function () {
        this.$el.html(this.template());
    }
});

当然，这只是众多方法中的一种；我个人更喜欢转换，它允许我编写如下代码：

Backbone.View.extend({
    template: JST['mytemplate.hbs'],
    render: function () {
        this.$el.html(this.template());
    }
});

Backbone.View.extend({
    template: require('../templates/mytemplate.hbs'),
    render: function () {
        this.$el.html(this.template());
    }
});

---

我建议使用RequireJS进行依赖关系管理

使用，您将定义一个视图，如

define(['text!path/to/template/view.html'], function (templateContent) {
   var View = Backbone.View.extend({
      template: _.template(templateContent),
      render: function () {
          this.$el(this.template())
      }
    });
    return view;
});

出于构建期间的性能原因，还可以用于将模板文件（JS文件）连接到单个文件中