"TypeError non capturé: undefined n'est pas une fonction" - Application Débutant Backbone.js

Question

Je suis la mise en place est assez simple application avec la colonne vertébrale, et j'obtiens une erreur.

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

C'est l'endroit où l'erreur s'affiche dans l'Inspecteur de Chrome (fichier 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();
  }
};

Voici mes tâches de l'index.haml fichier

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

= yield :javascript

modèles / task.js

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

collections / tasks.js

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

les 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 je vais appeler 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>

Toutes les idées seront grands. Merci!

Answer 1

Uncaught TypeError: undefined 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, c'est undefined.

Donc ce qui est sur example_app.js ligne 7? Ressemble à ceci:

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

Il n'y a qu'une seule fonction en cours d'exécution sur cette ligne. Nous avons trouvé le problème! ExampleApp.Collections.Tasks est undefined.

Donc permet de regarder où est déclarée:

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

Si c'est tout le code pour cette collection, alors la cause est juste ici. Vous affectez le constructeur de variable globale, appelée Tasks. Mais vous ne vous l'ajouter à la ExampleApp.Collections objet, un lieu, plus tard, vous l'attendez.

Le changement que cela, et je parie que vous souhaitez être bon.

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

Voir comment les noms propres et les numéros de ligne sont en essayant de se faire? Jamais, jamais, jamais l'égard des erreurs binaires (cela fonctionne ou pas). Au lieu de lire l'erreur, dans la plupart des cas, le message d'erreur lui-même vous donne la critique d'indices que vous devez suivre pour trouver la vraie question.

---

En Javascript, lors de l'exécution d'une fonction, il est évalué comme:

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

Cette expression peut être complexe. Alors, quand vous voyez undefined is not a function cela signifie que l'expression ne renvoie pas à un objet de fonction. Donc, vous avez à 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 ne l'auriez pensé.