如何在带有 RequireJS 的 Handlebars 中使用预编译模板？

Question

我想预编译我的 Handlebars 模板，但我不确定这在开发模式下是如何工作的。

通常的做法是运行一些诸如Guard 之类的后台进程来持续监控对Handlebars 模板文件的更改？

我正在使用 RequireJS 来拉入模板；例如：

define(['jquery', 'handlebars', 'text!templates/my_template'], function($, Handlebars, myTemplate) {

  // ...

  var data = {"some": "data", "some_more": "data"};
  var templateFn = Handlebars.compile(myTemplate);
  $('#target').append(templateFn(data));

  // ...

});

所以我知道一旦模板被预编译，就会这样做：

define(['jquery', 'handlebars'], function($, Handlebars) {

  // ...

  var data = {"some": "data", "some_more": "data"};
  var template = Handlebars.templates['my_template'];
  $('#target').append(template(data));

  // ...

});

注意以下关于第二个代码sn-p中的内容：

1. RequireJS 模块不再拉入模板。
2. Handlebars.compile() 不再使用。

那么，每当模板文件发生文件系统级别的修改时，我通常会运行 Guard 以保持我的模板编译？

基本上我的问题是，开发人员是否打算这样做？

if (development) {
  compile templates
}
else {
  use precompiled templates
}

我也在使用 Rails，所以也许有一些像 sass-rails 这样的黑魔法。

Answer 1

你看过 Require.js Handlebars Plugin (https://github.com/SlexAxton/require-handlebars-plugin) 或 epeli 的 requirejs-hbs (https://github.com/epeli/requirejs-hbs) 吗？

Answer 2

自从提出这个问题后，我发现另一种实现此目的的方法可能是通过 Grunt Watch。然而，更好的方法是使用 Grunt 和 Browserify，完全跳过 RequireJS。然后，您将使用 NPM 包......并且 RequireJS 可用的大多数库似乎也可以作为 NPM 包使用（令人惊讶的是，甚至基于 DOM 的库，如 jQuery、Backbone、Angular）。然后你使用同步 require() 调用来要求东西：

var $ = require('jquery'),
    Backbone = require('backbone'),
    AppRouter = require('./app/routers/app');

// Compile LESS and attach resulting CSS to the HEAD.
require('./less/app.less');

$(function() {
    new AppRouter();
    Backbone.history.start();
});

这要好得多，而且这是可能的，因为应用程序每次运行时都是完全构建的。将其与 Grunt Watch 结合使用，这样您的应用就会在每次发生变化时自行重建，并且您可以开展业务。

构建过程甚至负责构建 Handlebars 模板。要包含模板，您只需执行require('./templates/my-template.hbs');，grunt-browserify 的构建过程将找到此 require() 调用，编译模板，并将编译后的模板包含到构建应用程序 js 文件中。

比 RequireJS 好多了！

Answer 3

这篇关于 Require.js 和 Handlebars 的文章可能对http://seanamarasinghe.com/developer/requirejs-handlebars/有帮助