The code below gives me this error in Chrome's JavaScript console:
Uncaught TypeError: undefined is not a function
Stack trace:
(anonymous function) ember-1.0.0-rc.3.js:22443
b.extend.each jquery-1.9.1.min.js:3
b.fn.b.each jquery-1.9.1.min.js:3
Ember.Handlebars.bootstrap ember-1.0.0-rc.3.js:22432
bootstrap ember-1.0.0-rc.3.js:22454
(anonymous function) ember-1.0.0-rc.3.js:12646
Ember.runLoadHooks ember-1.0.0-rc.3.js:12645
Ember.Application.Ember.Namespace.extend._initialize ember-1.0.0-rc.3.js:26808
(anonymous function) ember-1.0.0-rc.3.js:4504
Ember.handleErrors ember-1.0.0-rc.3.js:411
invoke ember-1.0.0-rc.3.js:4502
iter ember-1.0.0-rc.3.js:4572
RunLoop.flush ember-1.0.0-rc.3.js:4626
RunLoop.end ember-1.0.0-rc.3.js:4531
tryable ember-1.0.0-rc.3.js:4732
Ember.tryFinally ember-1.0.0-rc.3.js:1199
Ember.run.end ember-1.0.0-rc.3.js:4735
autorun
Using Ember's dev version, this error occurs in the bootstrapping process:
Ember.Handlebars.bootstrap = function(ctx) {
var selectors = 'script[type="text/x-handlebars"], script[type="text/x-raw-handlebars"]';
Ember.$(selectors, ctx)
.each(function() {
// Get a reference to the script tag
var script = Ember.$(this);
var pile = (script.attr('type') === 'text/x-raw-handlebars') ?
Ember.$.proxy(Handlebarspile, Handlebars) :
Ember.$.proxy(Ember.Handlebarspile, Ember.Handlebars),
// Get the name of the script, used by Ember.View's templateName property.
// First look for data-template-name attribute, then fall back to its
// id if no name is found.
templateName = script.attr('data-template-name') || script.attr('id') || 'application',
/**** ERROR HERE ****/
template = pile(script.html());
My HTML code (the JS is the sample code taken from Ember's homepage):
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<div id="mapTemplate">
<canvas style="border: thick solid black" id="mapDesigner" width="500" height="500"></canvas>
</div>
<script src="3rdParty/jQuery/jquery-1.9.1.min.js"></script>
<script src="3rdParty/HandlebarsJS/handlebars.runtime.js"></script>
<script src="3rdParty/EmberJS/ember-1.0.0-rc.3.min.js"></script>
<script type="text/x-handlebars">
{{outlet}}
</script>
<script type="text/x-handlebars" id="index">
<h1>People</h1>
<ul>
{{#each model}}
<li>Hello, <b>{{fullName}}</b>!</li>
{{/each}}
</ul>
</script>
<script>
$(function () {
App = Ember.Application.create();
App.Person = Ember.Object.extend({
firstName: null,
lastName: null,
fullName: function() {
return this.get('firstName') +
" " + this.get('lastName');
}.property('firstName', 'lastName')
});
App.IndexRoute = Ember.Route.extend({
model: function() {
var people = [
App.Person.create({
firstName: "Tom",
lastName: "Dale"
}),
App.Person.create({
firstName: "Yehuda",
lastName: "Katz"
})
];
return people;
}
});
});
</script>
</body>
</html>
Library versions:
Handlebars.js: 1.0.0-rc.3
Ember.js: 1.0.0-rc.3
jQuery: 1.9.1
jsFiddle playground
/
The code below gives me this error in Chrome's JavaScript console:
Uncaught TypeError: undefined is not a function
Stack trace:
(anonymous function) ember-1.0.0-rc.3.js:22443
b.extend.each jquery-1.9.1.min.js:3
b.fn.b.each jquery-1.9.1.min.js:3
Ember.Handlebars.bootstrap ember-1.0.0-rc.3.js:22432
bootstrap ember-1.0.0-rc.3.js:22454
(anonymous function) ember-1.0.0-rc.3.js:12646
Ember.runLoadHooks ember-1.0.0-rc.3.js:12645
Ember.Application.Ember.Namespace.extend._initialize ember-1.0.0-rc.3.js:26808
(anonymous function) ember-1.0.0-rc.3.js:4504
Ember.handleErrors ember-1.0.0-rc.3.js:411
invoke ember-1.0.0-rc.3.js:4502
iter ember-1.0.0-rc.3.js:4572
RunLoop.flush ember-1.0.0-rc.3.js:4626
RunLoop.end ember-1.0.0-rc.3.js:4531
tryable ember-1.0.0-rc.3.js:4732
Ember.tryFinally ember-1.0.0-rc.3.js:1199
Ember.run.end ember-1.0.0-rc.3.js:4735
autorun
Using Ember's dev version, this error occurs in the bootstrapping process:
Ember.Handlebars.bootstrap = function(ctx) {
var selectors = 'script[type="text/x-handlebars"], script[type="text/x-raw-handlebars"]';
Ember.$(selectors, ctx)
.each(function() {
// Get a reference to the script tag
var script = Ember.$(this);
var pile = (script.attr('type') === 'text/x-raw-handlebars') ?
Ember.$.proxy(Handlebars.pile, Handlebars) :
Ember.$.proxy(Ember.Handlebars.pile, Ember.Handlebars),
// Get the name of the script, used by Ember.View's templateName property.
// First look for data-template-name attribute, then fall back to its
// id if no name is found.
templateName = script.attr('data-template-name') || script.attr('id') || 'application',
/**** ERROR HERE ****/
template = pile(script.html());
My HTML code (the JS is the sample code taken from Ember's homepage):
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<div id="mapTemplate">
<canvas style="border: thick solid black" id="mapDesigner" width="500" height="500"></canvas>
</div>
<script src="3rdParty/jQuery/jquery-1.9.1.min.js"></script>
<script src="3rdParty/HandlebarsJS/handlebars.runtime.js"></script>
<script src="3rdParty/EmberJS/ember-1.0.0-rc.3.min.js"></script>
<script type="text/x-handlebars">
{{outlet}}
</script>
<script type="text/x-handlebars" id="index">
<h1>People</h1>
<ul>
{{#each model}}
<li>Hello, <b>{{fullName}}</b>!</li>
{{/each}}
</ul>
</script>
<script>
$(function () {
App = Ember.Application.create();
App.Person = Ember.Object.extend({
firstName: null,
lastName: null,
fullName: function() {
return this.get('firstName') +
" " + this.get('lastName');
}.property('firstName', 'lastName')
});
App.IndexRoute = Ember.Route.extend({
model: function() {
var people = [
App.Person.create({
firstName: "Tom",
lastName: "Dale"
}),
App.Person.create({
firstName: "Yehuda",
lastName: "Katz"
})
];
return people;
}
});
});
</script>
</body>
</html>
Library versions:
Handlebars.js: 1.0.0-rc.3
Ember.js: 1.0.0-rc.3
jQuery: 1.9.1
jsFiddle playground
http://jsfiddle/t7qbe/1/
Share Improve this question edited May 29, 2013 at 14:32 ComFreek asked May 10, 2013 at 16:06 ComFreekComFreek 29.5k18 gold badges107 silver badges157 bronze badges 8- Look at the file/line number indication in the Error and tell us which line it is. In general: this error means that you're using a variable as a function (ie. calling it) but it has no value (undefined). – Halcyon Commented May 10, 2013 at 16:07
-
@FritsvanCampen I've already highlighted the "erroneous" line by a
ERROR HEREment, please take a look at the first code block. Looking at the stack trace, I can see that this error does not e from my code, it is started in Ember. – ComFreek Commented May 10, 2013 at 16:48 -
Look at the function on that line, one of them is bad. So either
pileorscript.htmlis not a function. – Halcyon Commented May 10, 2013 at 16:49 -
Pretty sure you want
{{#each controller}}not{{#each model}}. – mehulkar Commented May 10, 2013 at 17:49 -
@MehulKar It does still not work. I thought
{{#each model}}should iterate over each model and output itsfullNameproperty. – ComFreek Commented May 10, 2013 at 17:56
4 Answers
Reset to default 3I ran into this problem today while migrating an older ember app. The problem is caused by mixing templates of type x-handlebars and x-raw-handlebars.
If you pile your templates in production, then your build system is likely only bundling handlebars.runtime.js which is a subset of handlebars without the ability to pile templates. This is fine since your templates are already piled to javascript.
However if you add some script x-handlebars tags to your html, Ember will as part of its bootstrapping process look to prepile those templates. But without the full handlebars library it will fail at the pile function.
Solution: If you need the ability to pile handlebars while still using piled templates, ensure that your build system contains the plete handlebars library, and not just the runtime.
The versions of ember and handlebars you were using was off maybe? Not sure what Handlebars runtime is. I replaced them with the correct versions from builds.emberjs. and now it works.
Update for 2014 -
Ran into same error when I switched to cloudflare. This one was a real time suck to track down. Wish there had been a better message.
Was using:
<script src="http://cdnjs.cloudflare./ajax/libs/handlebars.js/1.1.2/handlebars.runtime.min.js"></script>
Swapped to:
<script src="http://cdnjs.cloudflare./ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script>
and error went away.
I doubt the minification was the problem. The runtime version of Handlebars is intended to work only with prepiled templates. In this case, Ember will try to pile your inline templates anyway. More from the Handlebars site: http://handlebarsjs./prepilation.html
Here's a working version of your JsFiddle, where I swapped out the .runtime Handlebars for the full version.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745259743a4619156.html
评论列表（0条）