我正在使用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;
});
当Handlebars
调用第25行的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
对象来自何处以及如何摆脱它?我不担心,但如果我把这个项目推到别的地方,我总是要记住这样做。
答案 0 :(得分:62)
我自己刚刚遇到过这个问题,第一次使用了Handlebars。您可能正在使用"运行时"制作把手。我把这个包含在我的要求中,错误地假设它是缩小版本或其他东西。
但事实上,运行时版本因排除模板编译器而显着缩小,仅用于预编译模板。如果您正在编译模板客户端,那么您需要http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v3.0.3.js的完整版本(注意:此链接可能已过期;您可能最好直接转到handlebarsjs.com和正在寻找"完整版"的当前下载,而不是运行时。)
否则,您可以按照Handlebars网站上的说明运行模板编译器。你需要节点。模板编译器生成一个JavaScript文件,其中包含您需要链接到页面的预编译模板代码以及Handlebars运行时构建。
答案 1 :(得分:-2)
以下是我如何修复此问题,虽然我完全不明白为什么上面的配置不起作用。 hbs
插件有一个文件夹,其中包含所需的所有依赖项,例如handlebars
。当我提到handlebars
目录中包含的hbs
副本时,一切都按预期运行。我不明白为什么handlebars
的香草副本不起作用。我没有使用handlebars
运行时,它是完整版,但仍然存在问题。在我解决了这个问题后,我的模板内容才起作用。