"Uncaught TypeError：未定義は関数ではありません" - Beginner Backbone.js Application

Question

私はバックボーンでかなり単純なアプリケーションを設定していますが、エラーが発生しています。

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

エラーがクロームインスペクター（初期化ファイル - 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(); 
    } 
}; 

ここに/私のタスクは

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

= yield :javascript 

モデルを提出index.hamlですタスク.js

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

col lections/tasks.js

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

をtasks.jsそしてここで私は、すべてのファイルを呼んでいる証拠だ（と思う）：

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

この行には1つの機能しかありません。私たちは問題を見つけました！ 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が表示されると、式が関数オブジェクトを返さなかったことを意味します。だからあなたが実行しようとしているものがなぜ機能でないのかを理解しなければなりません。

この場合は、あなたが思った場所に何かを置かなかったからです。