web-dev-qa-db-ja.com

「不明なTypeError：undefinedは関数ではありません」-Beginner 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

モデル/ task.js

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

コレクション/ 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>

どんなアイデアでも素晴らしいでしょう。ありがとう！

javascriptruby-on-railsruby-on-rails-3backbone.js
38
jake

Uncaught TypeError：undefinedは関数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が表示される場合、式が関数オブジェクトを返さなかったことを意味します。したがって、実行しようとしているのが関数ではない理由を理解する必要があります。

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

80
Alex Wayne