javascript - Backbone : undefined is not a function

Question

我正在开发一个使用 Backbone.js/Marionette 的应用程序。目前，当我尝试从远程 API 获取我的集合时，出现以下错误:

Uncaught TypeError: undefined is not a function backbone.js:225
Events.(anonymous function) backbone.js:225
e.CollectionView.e.View.extend._initialEvents backbone.marionette.js:1585
e.CollectionView.e.View.extend.constructor backbone.marionette.js:1548
child backbone.js:1566
List.Controller.listAttractions list_controller.js:9
(anonymous function) app.js:11
triggerEvents backbone.js:207
Backbone.Events.trigger backbone.js:148
e.triggerMethod.d backbone.marionette.js:561
c.extend.start backbone.marionette.js:2461
(anonymous function)

我跟踪了堆栈跟踪，发现问题似乎源于 list_controller.js:9。 list_controller.js 的代码是:

Manager.module("AttractionsApp.List", function(List, Manager, Backbone, Marionette, $, _) {
    List.Controller = {
        listAttractions: function() {
            var attractions = Manager.request("attraction:entities");

            console.log(new Manager.AttractionsApp.List.Attractions());

            var attractionsListView = new Manager.AttractionsApp.List.Attractions({
                collection: attractions
            });

            attractionsListView.on("itemview:attraction:show", function(childView, model) {
                Manager.AttractionsApp.Show.Controller.showAttraction(model);
            });

            Manager.attractionsRegion.show(attractionsListView);
        }
    }
});

问题似乎与:

var attractionsListView = new Manager.AttractionsApp.List.Attractions({
    collection: attractions
});

如果我注释掉集合:景点，错误就会消失。知道这里发生了什么吗？

编辑景点实体文件:

Manager.module("Entities", function(Entities, Manager, Backbone, Marionette, $, _) {
    Entities.Attraction = Backbone.Model.extend({});

    Entities.Attractions = Backbone.Collection.extend({
        url: '/api/attraction/',
        model: Entities.Attraction,
    });

    var attractions;

    var API = {
        getAttractionEntities: function() {
            var attractions = new Entities.Attractions();
            var defer = $.Deferred();
            attractions.fetch({
                success: function(collection, response) {
                    console.log(collection);
                    defer.resolve(collection);
                },
                error: function(collection, response) {
                    console.log("ERROR");
                },
            });

            return defer.promise();
        }
    };

    Manager.reqres.setHandler("attraction:entities", function() {
        return API.getAttractionEntities();
    });
});

Answer 1

我认为问题可能是 API.getAttractionEntities() 返回的是一个 promise ，而不是 Marionette 在 1585 行所期望的实际集合。

尝试使用 attractions.done() (在下面的示例中我将其重命名为 attractionsPromise.done())来包装 的创建和管理景点 ListView ，如下所示:

Manager.module("AttractionsApp.List", function(List, Manager, Backbone, Marionette, $, _) {
    List.Controller = {
        listAttractions: function() {
            var attractionsPromise = Manager.request("attraction:entities");

            console.log(new Manager.AttractionsApp.List.Attractions());

            attractionsPromise.done(function(attractions) {
                var attractionsListView = new Manager.AttractionsApp.List.Attractions({
                    collection: attractions
                });

                attractionsListView.on("itemview:attraction:show", function(childView, model) {
                    Manager.AttractionsApp.Show.Controller.showAttraction(model);
                });

                Manager.attractionsRegion.show(attractionsListView);
            });
        }
    }
});