javascript 为什么我的 Handlebars 没有 compile 方法?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19834204/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 16:58:49  来源:igfitidea点击:

Why does my Handlebars not have a compile method?

javascriptbackbone.jsrequirejshandlebars.js

提问by jhamm

I am setting up a Backboneproject with Handlebarsand I am having an issue with Handlebarsnot finding the compile method. Here is my config file:

我正在建立一个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();
});

Here is the app.jsthat I am trying to 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;
});

When Handlebarscalls the hbs.jsfile on line 25 it cannot find the compilefunction

当在第 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"
      );
    }

  };
});

The Handlebarsvariable gives me the Handlebars environment, but it has an extra layer in it, so I have to change that line to Handlebars.default.compile(raw). Where is that defaultobject coming from and how do I get rid of it? I wouldn't worry about it, but if I pull down this project somewhere else I am always going to have to remember to do that.

Handlebars变量为我提供了 Handlebars 环境,但其中有一个额外的层,因此我必须将该行更改为Handlebars.default.compile(raw). 该default物体来自哪里,我该如何摆脱它?我不会担心,但是如果我在其他地方撤下这个项目,我将永远必须记住这样做。

采纳答案by jhamm

Here is how I fixed this issue, although I do not understand completely why the configuration above did not work. The hbsplugin had a folder with all the dependencies it needed in it, like handlebars. When I referred to the handlebarscopy contained in the hbsdirectory, then everything worked like it was supposed to. I do not understand why the vanilla copy of handlebarsdid not work. I was not using the handlebarsruntime, it was the full version, but still there was an issue. After I resolved this, then my template stuff just worked.

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

回答by Iguananaut

I just encountered this myself, using Handlebars for this first time. It's likely that you're using the "runtime" build of Handlebars. I included this one in my requirements, mistakenly assuming it was the minified version or something.

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

But in fact the runtime version is significantly smaller as it excludes the template compiler, and is for use only with pre-compiled templates. If you're compiling the template client-side then you need the full version from http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v3.0.3.js(Note: This link may be out of date; you're probably better off going directly to handlebarsjs.com and looking for the current download for the "full version", as opposed to runtime.)

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

Otherwise, you can follow the instructions on the Handlebars website to run the template compiler. You need node for this. The template compiler produces a JavaScript file containing the pre-compiled template code which you need to link to your page along with the Handlebars runtime build.

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