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
Why does my Handlebars not have a compile method?
提问by jhamm
I am setting up a Backbone
project with Handlebars
and I am having an issue with Handlebars
not 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.js
that 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 Handlebars
calls the hbs.js
file on line 25 it cannot find the compile
function
当在第 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 Handlebars
variable 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 default
object 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 hbs
plugin had a folder with all the dependencies it needed in it, like handlebars
. When I referred to the handlebars
copy contained in the hbs
directory, then everything worked like it was supposed to. I do not understand why the vanilla copy of handlebars
did not work. I was not using the handlebars
runtime, 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 运行时构建一起链接到您的页面的预编译模板代码。