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

时间:2013-08-14 16:40:44

标签: requirejs handlebars.js client-side-templating

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

通常的做法是运行Guard这样的后台流程来持续监控Handlebars模板文件的更改吗?

我正在使用RequireJS来提取模板; e.g:

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()。
  3. 因此,只要文件系统级修改发生在模板文件中,我就会运行Guard以保持模板编译?

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

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

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

3 个答案:

答案 0 :(得分:11)

您是否看过Require.js Handlebars插件(https://github.com/SlexAxton/require-handlebars-plugin)或者epeli的requirejs-hbs(https://github.com/epeli/requirejs-hbs)?

答案 1 :(得分: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好多了!

答案 2 :(得分:0)

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