“Uncaught TypeError:undefined不是函数” - 初学者Backbone.js应用程序

时间:2012-11-21 22:00:37

标签: javascript ruby-on-rails ruby-on-rails-3 backbone.js

我正在设置一个非常简单的主干应用程序,我收到了错误。

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

这是Chrome Inspector中出现错误的位置(init文件 - 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

models / task.js

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

collections / tasks.js

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

routers / tasks.js

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>

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

3 个答案:

答案 0 :(得分:80)

  

未捕获的TypeError:undefined不是函数example_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时,表示表达式未返回函数对象。所以你必须弄清楚为什么你要执行的不是一个函数。

在这种情况下,这是因为你没有把你想到的东西放在那里。

答案 1 :(得分:1)

我在以下示例中也发生了相同的错误-

async.waterfall([function(waterCB) {
    waterCB(null);
}, function(**inputArray**, waterCB) {
    waterCB(null);
}], function(waterErr, waterResult) {
    console.log('Done');
});

在上述瀑布函数中,我在瀑布第二函数中接受inputArray参数。但是这个inputArray并没有在waterCB中的瀑布第一函数中传递。

检查功能参数以下是正确的示例。

async.waterfall([function(waterCB) {
    waterCB(null, **inputArray**);
}, function(**inputArray**, waterCB) {
    waterCB(null);
}], function(waterErr, waterResult) {
    console.log('Done');
});

谢谢

答案 2 :(得分:0)

[开玩笑模式]

您可以通过添加以下内容来解决此问题:

https://github.com/donavon/undefined-is-a-function

import { undefined } from 'undefined-is-a-function';
// Fixed! undefined is now a function.

[笑话模式关闭]