admin管理员组

文章数量:1417070

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/

  • javascript
  • html
  • ember.js
  • handlebars.js
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 HERE ment, 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 pile or script.html is 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 its fullName property. – ComFreek Commented May 10, 2013 at 17:56
 |  Show 3 more ments

4 Answers 4

Reset to default 3

I 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.

本文标签： javascriptEmberjs quotUndefined is not a functionquot in internal bootstrapping processStack Overflow

版权声明：本文标题：javascript - Ember.js: &quot;Undefined is not a function&quot; in internal bootstrapping process - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745259742a2650301.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。