14

我正在建立一个Backbone项目，Handlebars但我遇到了Handlebars找不到编译方法的问题。这是我的配置文件：

require.config({
  hbs: {
    templateExtension: '.hbs'
  },
  paths: {
    backbone: "libs/backbone/backbone",
    handlebars: 'libs/handlebars/handlebars.amd',
    hbs: 'libs/requirejs-hbs/hbs',
    jquery: 'libs/jquery/jquery',
    jqueryMockAjax: 'libs/jquery-mockjax/jquery.mockjax',
    text: 'libs/requirejs-text/text',
    templates: 'templates/',
    underscore: 'libs/underscore/underscore'
  },
  shim: {
    backbone: {
      deps: [
        'underscore',
        'jquery'
      ],
      exports: 'Backbone'
    },
    hbs: {
      deps: ['handlebars'],
      exports: 'hbs'
    },
    jqueryMockAjax: {
      deps: [ 'jquery' ],
      exports: '$.mockjax'
    },
    underscore: {
      exports: '_'
    }
  }
});

require(['app'], function(App) {
  'use strict';

  var app = new App();
  app.render();
});

这是app.js我要渲染的：

define(function(require) {

  var Backbone = require('backbone');
  var testTemplate = require('hbs!templates/test');

  var router = Backbone.View.extend({
    el: $('body'),
    template: testTemplate,
    render: function() {
      return $(this.el).html(this.template());
    }
  });

  return router;
});

在第 25 行Handlebars调用hbs.js文件时找不到compile函数

define(["handlebars"], function(Handlebars) {
  var buildMap = {},
      templateExtension = ".hbs";

  return {

    // http://requirejs.org/docs/plugins.html#apiload
    load: function (name, parentRequire, onload, config) {

      // Get the template extension.
      var ext = (config.hbs && config.hbs.templateExtension ? config.hbs.templateExtension : templateExtension);

      if (config.isBuild) {
        // Use node.js file system module to load the template.
        // Sorry, no Rhino support.
        var fs = nodeRequire("fs");
        var fsPath = config.dirBaseUrl + "/" + name + ext;
        buildMap[name] = fs.readFileSync(fsPath).toString();
        onload();
      } else {
        // In browsers use the text-plugin to the load template. This way we
        // don't have to deal with ajax stuff
        parentRequire(["text!" + name + ext], function(raw) {
          // Just return the compiled template
 ****HERE onload(Handlebars.compile(raw));
        });
      }

    },

    // http://requirejs.org/docs/plugins.html#apiwrite
    write: function (pluginName, name, write) {
      var compiled = Handlebars.precompile(buildMap[name]);
      // Write out precompiled version of the template function as AMD
      // definition.
      write(
        "define('hbs!" + name + "', ['handlebars'], function(Handlebars){ \n" +
          "return Handlebars.template(" + compiled.toString() + ");\n" +
        "});\n"
      );
    }

  };
});

该Handlebars变量为我提供了 Handlebars 环境，但其中有一个额外的层，所以我必须将该行更改为Handlebars.default.compile(raw). 那个物体来自哪里，default我该如何摆脱它？我不会担心，但如果我将这个项目拉到其他地方，我总是必须记住这样做。

4

2 回答 2

62

我自己也遇到过这个问题，第一次使用 Handlebars。您可能正在使用 Handlebars 的“运行时”版本。我将这个包含在我的要求中，错误地假设它是缩小版本或其他东西。

但实际上运行时版本要小得多，因为它不包括模板编译器，并且仅用于预编译模板。如果您正在编译模板客户端，那么您需要来自http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v3.0.3.js的完整版本 （注意：此链接可能已过期; 您最好直接访问 handlebarsjs.com 并查找“完整版”的当前下载，而不是运行时。）

否则，您可以按照 Handlebars 网站上的说明运行模板编译器。为此，您需要节点。模板编译器生成一个 JavaScript 文件，其中包含您需要链接到您的页面的预编译模板代码以及 Handlebars 运行时构建。

于 2013-11-15T21:44:39.207 回答
-2

这是我解决此问题的方法，尽管我不完全理解为什么上面的配置不起作用。该hbs插件有一个文件夹，其中包含它所需的所有依赖项，例如handlebars. 当我提到目录handlebars中包含的副本时hbs，一切都按预期进行。我不明白为什么香草副本handlebars不起作用。我没有使用handlebars运行时，它是完整版，但仍然存在问题。在我解决了这个问题之后，我的模板就可以工作了。

于 2013-11-16T10:30:11.273 回答