"Uncaught TypeError: undefined n'est pas une fonction" – Beginner Backbone.js Application

Je configure une application très simple avec l'épine dorsale, et je reçois une erreur.

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

C'est là que l'erreur s'affiche dans 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(); } };

Voici mes tâches index.haml file

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

Models / task.js

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

Collections / tasks.js

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

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

Et voici la preuve que j'appelle tous les fichiers (je pense):

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

Toute idée serait géniale. Merci!

Uncaught TypeError: indéfini n'est pas une fonction example_app.js: 7

Ce message d'erreur raconte toute l'histoire. Sur cette ligne, vous essayez d'exécuter une fonction. Cependant, tout ce qui est en cours d'exécution n'est pas une fonction! Au lieu de cela, il est undefined .

Alors, qu'est-ce qui se trouve sur example_app.js ligne 7? Ressemble à ça:

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

Il n'existe qu'une seule fonction sur cette ligne. Nous avons trouvé le problème! ExampleApp.Collections.Tasks est undefined .

Donc, regardons où cela est déclaré:

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

Si c'est tout le code de cette collection, la cause principale est ici. Vous assignez le constructeur à la variable globale, appelée Tasks . Mais vous ne l'ajoutez jamais à l'objet ExampleApp.Collections , un endroit où vous attendez plus tard.

Changez cela, et je parie que vous seriez bon.

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

Voyez à quel point les noms et les numéros de ligne sont-ils importants en ce sens? Ne jamais considérer les erreurs comme binaires (elles fonctionnent ou non). Au lieu de cela, lisez l'erreur, dans la plupart des cas, le message d'erreur lui-même vous donne les indices critiques dont vous avez besoin pour parcourir pour trouver le problème réel.

Dans Javascript, lorsque vous exécutez une fonction, il est évalué comme suit:

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

Cette expression peut être complexe. Donc, lorsque vous voyez undefined is not a function cela signifie que l'expression n'a pas renvoyé un objet fonction. Donc, vous devez comprendre pourquoi ce que vous essayez d'exécuter n'est pas une fonction.

Et dans ce cas, c'est parce que vous n'avez pas mis quelque chose où vous pensiez que vous l'aviez fait.