我正在设置一个带有骨干的非常简单的应用程序,并且遇到了错误。

Uncaught TypeError: undefined is not a function example_app.js:7
ExampleApp.initialize example_app.js:7
(anonymous function)

这是Chrome Inspector中出现错误的地方(INIT FILE -example_app.js):

var ExampleApp = {
  Models: {},
  Collections: {},
  Views: {},
  Routers: {},
  initialize: function() {
    var tasks = new ExampleApp.Collections.Tasks(data.tasks);
    new ExampleApp.Routers.Tasks({ tasks: tasks });
    Backbone.history.start();
  }
};

这是我的任务index.haml文件

- content_for :javascript do
  - javascript_tag do
    ExampleApp.initialize({ tasks: #{raw @tasks.to_json} });

= yield :javascript

模型 /任务

var Task = Backbone.Model.extend({});

集合 /任务

var Tasks = Backbone.Collection.extend({
    model: Task,
    url: '/tasks'
});

路由器 /任务

ExampleApp.Routers.Tasks = Backbone.Router.extend({
    routes: {
        "": "index"
    },

    index: function() {
        alert('test');
        // var view = new ExampleApp.Views.TaskIndex({ collection: ExampleApp.tasks });
        // $('body').html(view.render().$el);
    }
});

这是我调用所有文件(我认为)的证明:

<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui.js?body=1" type="text/javascript"></script>
<script src="/assets/underscore.js?body=1" type="text/javascript"></script>
<script src="/assets/backbone.js?body=1" type="text/javascript"></script>
<script src="/assets/backbone-support/support.js?body=1" type="text/javascript"></script>
<script src="/assets/backbone-support/composite_view.js?body=1" type="text/javascript"></script>
<script src="/assets/backbone-support/swapping_router.js?body=1" type="text/javascript"></script>
<script src="/assets/backbone-support.js?body=1" type="text/javascript"></script>
<script src="/assets/example_app.js?body=1" type="text/javascript"></script>
<script src="/assets/easing.js?body=1" type="text/javascript"></script>
<script src="/assets/modernizr.js?body=1" type="text/javascript"></script>
<script src="/assets/models/task.js?body=1" type="text/javascript"></script>
<script src="/assets/collections/tasks.js?body=1" type="text/javascript"></script>
<script src="/assets/views/task_view.js?body=1" type="text/javascript"></script>
<script src="/assets/views/tasks.js?body=1" type="text/javascript"></script>
<script src="/assets/views/tasks_index.js?body=1" type="text/javascript"></script>
<script src="/assets/routers/tasks.js?body=1" type="text/javascript"></script>
<script src="/assets/tasks/index.js?body=1" type="text/javascript"></script>
<script src="/assets/tasks/task.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>

任何想法都会很棒。谢谢!

答案

undurect typeError:未定义不是功能示例_APP.JS:7

此错误消息讲述了整个故事。在此行,您正在尝试执行功能。但是,无论执行什么都不是一个函数!相反,是undefined

那怎么了example_app.js第7行?看起来这样:

var tasks = new ExampleApp.Collections.Tasks(data.tasks);

该行只有一个功能正在运行。我们发现了问题!ExampleApp.Collections.Tasksundefined

因此,让我们看看宣布的位置:

var Tasks = Backbone.Collection.extend({
    model: Task,
    url: '/tasks'
});

如果这是此集合的所有代码,则根本原因就在这里。您将构造函数分配给全局变量,称为Tasks。但是您永远不会将其添加到ExampleApp.Collections对象,您以后期望它是一个地方。

把它改成这样,我打赌你会很好的。

ExampleApp.Collections.Tasks = Backbone.Collection.extend({
    model: Task,
    url: '/tasks'
});

明白正确的名称和行号对于解决这个问题有多重要吗?


在JavaScript中,当您执行函数时,它会像以下内容一样评估:

expression.that('returns').aFunctionObject(); // js
execute -> expression.that('returns').aFunctionObject // what the JS engine does

该表达可能很复杂。所以当你看到undefined is not a function这意味着表达式没有返回函数对象。因此,您必须弄清楚为什么要执行什么不是功能。

在这种情况下,这是因为您没有将某些内容放在您认为做的地方。

来自: stackoverflow.com