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

如果我注释掉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()正在回复一个承诺，而不是真正的集合，而这正是Marionette在第1585行所期待的。

尝试使用attractions.done()（我在下面的示例中重命名为attractionsPromise.done()）来包装attractionsListView的创建和管理，如下所示：

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

Backbone：undefined不是一个函数

1 个答案: