“未捕获的类型错误:未定义不是函数"；- 初学者 Backbone.js 应用程序 [英] "Uncaught TypeError: undefined is not a function" - Beginner Backbone.js Application

问题描述

我正在使用主干设置一个非常简单的应用程序，但出现错误.

I'm setting up a pretty simple app with backbone, and I'm getting an error.

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

这是 Chrome Inspector 中出现错误的地方(初始化文件 - example_app.js):

This is where the error is showing up in 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 文件

Here's my tasks index.haml file

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

= yield :javascript

模型/task.js

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

集合/tasks.js

collections / tasks.js

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

路由器/tasks.js

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);
    }
});

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

And here's proof that I'm calling all of the files (I think):

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

任何想法都会很棒.谢谢！

Any ideas would be great. Thanks!

推荐答案

Uncaught TypeError: undefined is not a function example_app.js:7

Uncaught TypeError: undefined is not a function example_app.js:7

此错误消息说明了整个故事.在这一行，您正在尝试执行一个函数.但是，正在执行的不是函数！相反，它是undefined.

This error message tells the whole story. On this line, you are trying to execute a function. However, whatever is being executed is not a function! Instead, it's undefined.

那么 example_app.js 第 7 行是什么?看起来像这样:

So what's on example_app.js line 7? Looks like this:

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

那条线上只有一个函数正在运行.我们发现了问题！ExampleApp.Collections.Tasks 是 undefined.

There is only one function being run on that line. We found the problem! ExampleApp.Collections.Tasks is undefined.

那么让我们看看声明的位置:

So lets look at where that is declared:

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

如果这就是这个集合的全部代码，那么根本原因就在这里.您将构造函数分配给名为 Tasks 的全局变量.但是您永远不会将它添加到 ExampleApp.Collections 对象中，这是您以后期望的位置.

If that's all the code for this collection, then the root cause is right here. You assign the constructor to global variable, called Tasks. But you never add it to the ExampleApp.Collections object, a place you later expect it to be.

把它改成这个，我打赌你会很好.

Change that to this, and I bet you'd be good.

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

看到正确的名称和行号在解决这个问题时有多重要吗?永远不要将错误视为二进制(它有效或无效).而是阅读错误，在大多数情况下，错误消息本身为您提供了需要追踪以找到真正问题的关键线索.

See how important the proper names and line numbers are in figuring this out? Never ever regard errors as binary (it works or it doesn't). Instead read the error, in most cases the error message itself gives you the critical clues you need to trace through to find the real issue.

在 Javascript 中，当你执行一个函数时，它的计算方式如下:

In Javascript, when you execute a function, it's evaluated like:

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

这个表达可能很复杂.所以当你看到 undefined is not a function 时，这意味着表达式没有返回一个函数对象.所以你必须弄清楚为什么你试图执行的不是一个函数.

That expression can be complex. So when you see undefined is not a function it means that expression did not return a function object. So you have to figure out why what you are trying to execute isn't a function.

在这种情况下，是因为你没有把一些东西放在你认为你做的地方.

And in this case, it was because you didn't put something where you thought you did.

这篇关于“未捕获的类型错误:未定义不是函数"；- 初学者 Backbone.js 应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！