Question

我正在制作一个主干JS / HandlebarsJS单页项目，而我是一个有骨干的菜鸟（我通常使用AngularJS）。我希望将每个模板（标题，侧边栏，页脚，内容等）保存在单独的文件中以供组织。

我已经阅读了一些帖子，说你应该将模板保存在单独的文件中进行开发，然后将它们合并到一个文件中进行生产。我很确定它们会是.html文件，而且我不确定将它们组合起来的工具。

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

如果你有一个教程，解释了很好的适当结构。

请，谢谢！

Answer 1

Handlebars模板通常以编译（= JavaScript）形式提供，这可以提高性能。要正确执行此操作，使用Grunt和grunt-contrib-handlebars任务等构建工具非常有意义。它从所有模板中生成一个JavaScript文件，默认情况下，将模板存储在全局JST对象中，因此您可以像这样使用它：

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

当然，这只是许多人的一种方式;我个人更喜欢使用Browserify转换hbsfy，这允许我编写如下代码：

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

Answer 2

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

使用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;
});

在构建期间，出于性能原因，r.js也可用于将模板文件（也是JS文件）连接成单个文件。

Backbone / Handlebars模板组织/包括

2 个答案: