"Uncaught 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 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'
});

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>

Любые идеи были бы замечательными. Спасибо!

Ответ 1

Uncaught TypeError: undefined не является функцией 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, это означает, что выражение не возвращает объект функции. Поэтому вам нужно выяснить, почему то, что вы пытаетесь выполнить, не является функцией.

И в этом случае, это было потому, что вы не поместили что-то там, где вы думали, что сделали.