javascript - "Uncaught TypeError: undefined is not a function"- 初学者 Backbone.js 应用程序

Question

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

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

这是 Chrome 检查器中显示错误的地方(初始文件 - 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

模型/task.js

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

集合/tasks.js

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

路由器/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>

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

Answer 1

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

这条错误消息说明了整个故事。在这一行中，您正在尝试执行一个函数。但是，正在执行的都不是函数!相反，它是 undefined。

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

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

只有一个函数在该行上运行。我们发现了问题! ExampleApp.Collections.Tasks 是 undefined。

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

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 时，这意味着表达式没有返回函数对象。因此，您必须弄清楚为什么您尝试执行的不是函数。

在这种情况下，这是因为你没有把东西放在你认为应该放的地方。