7

我想预编译我的 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));

  // ...

});

请注意关于第二个代码片段中的以下内容：

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

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

基本上我的问题是，开发人员这样做的意图是什么？

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

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

4

3 回答 3

11

Have you take a look at Require.js Handlebars Plugin (https://github.com/SlexAxton/require-handlebars-plugin) or epeli's requirejs-hbs (https://github.com/epeli/requirejs-hbs) ?

于 2013-08-15T01:18:48.283 回答
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 好得多！

于 2014-01-12T00:56:46.070 回答
0

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

于 2013-09-12T23:28:34.617 回答