「Uncaught TypeError：undefined不是函數」 - 初學者Backbone.js應用程序

Question

我設置了一個非常簡單的應用程序與骨幹，我得到一個錯誤。

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

這是錯誤是沒有顯示在Chrome檢查（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 

型號/ task.js

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

col lections/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這意味着表達式沒有返回一個函數對象。所以你必須弄清楚你爲什麼試圖執行不是一個函數。

而在這種情況下，這是因爲你沒有把你認爲你做的東西放進去。