Question

下面的代码在Chrome的JavaScript控制台中给出了这个错误：

未捕获的TypeError：undefined不是函数

堆栈追踪：

(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

使用Ember的开发版本，在引导过程中会发生此错误：

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 compile = (script.attr('type') === 'text/x-raw-handlebars') ?
                  Ember.$.proxy(Handlebars.compile, Handlebars) :
                  Ember.$.proxy(Ember.Handlebars.compile, 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 = compile(script.html());

我的HTML代码（JS是取自Ember主页的示例代码）：

<!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>

图书馆版本：

Handlebars.js：1.0.0-rc.3
Ember.js：1.0.0-rc.3
jQuery：1.9.1

jsFiddle playground

http://jsfiddle.net/t7qbe/1/

Answer 1

今天我在迁移旧的ember应用时遇到了这个问题。问题是由混合x-handlebars和x-raw-handlebars类型的模板引起的。

如果您在生产中编译模板，那么您的构建系统可能只捆绑handlebars.runtime.js，这是手柄的子集，但无法编译模板。这很好，因为您的模板已经编译为javascript。

但是，如果您向html添加一些脚本x-handlebars标签，Ember将在其引导过程中查看预编译这些模板。但如果没有完整的车把库，它将在compile功能失败。

解决方案：如果您需要在仍然使用编译模板的同时编译把手的能力，请确保您的构建系统包含完整的把手库，而不仅仅是运行时。

Answer 2

您使用的余烬和把手的版本可能已关闭？不确定Handlebars运行时是什么。我用builds.emberjs.com中的正确版本替换它们，现在它可以正常工作。

Answer 3

2014年更新 -

当我切换到cloudflare时遇到同样的错误。这是一个实时的追踪。希望有更好的信息。

正在使用：

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.runtime.min.js"></script>

交换到：

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script>

并且错误消失了。

Answer 4

我怀疑缩小是问题所在。 Handlebars的运行时版本仅适用于预编译模板。在这种情况下，Ember将尝试编译您的内联模板。更多来自Handlebars网站：http://handlebarsjs.com/precompilation.html

你的JsFiddle的{p> Here's a working version，我换了.runtime把手来换完整版。

Ember.js：内部引导过程中的“未定义不是函数”

4 个答案: