Javascript 渲染视图将返回未定义的

我有一个集合视图，它有两个过滤器方法和一个带有参数的渲染方法。我遇到的问题是，当第一次渲染视图时，它会返回一个错误。这是我的收藏：

var ResumeCollection = Backbone.Collection.extend({
    url: 'http://localhost:3000',
    filterActive: function () {
        var active = this.where({interviewed: false});
        return new ResumeCollection(active);
    },
    filterInterviewed: function () {
        var interviewed = this.where({interviewed: true});
        return new ResumeCollection(interviewed);
    }
});

var AppRouter = Backbone.Router.extend({
    routes: {
        '': 'home'
    },

    initialize: function () {
        this.layout = new LayoutView();
    }

    home: function () {
        this.layout.render(new ResumeList({
            collection: new ResumeCollection()
        }));
    }
});

我的看法是：

var ResumeList = Backbone.View.extend({
    events { // hash array of filter events },
    initialize: function () {
        this.collection.fetch();
    },

    render: function (filtered) {
        var self = this;
        var data;

        if (!filtered) {
            data = this.collection.toArray(); 
        } else {
            data = filtered.toArray();
        }

        _.each(data, function (cv) {
            self.$el.append((new ResumeView({model: cv})).render().$el);
        });

        return this;
    },

    showActive: function (ev) {
        var filtered = this.collection.filterActive();
        this.render(filtered);
    },

    showInterviewed: function (ev) {
        var filtered = this.collection.filterInterviewed();
        this.render(filtered);
    },

    showAll: function (ev) {
        this.render(this.collection);
    }
});

此视图通过传递集合在我的路由器中第一次呈现：

var ResumeCollection = Backbone.Collection.extend({
    url: 'http://localhost:3000',
    filterActive: function () {
        var active = this.where({interviewed: false});
        return new ResumeCollection(active);
    },
    filterInterviewed: function () {
        var interviewed = this.where({interviewed: true});
        return new ResumeCollection(interviewed);
    }
});

var AppRouter = Backbone.Router.extend({
    routes: {
        '': 'home'
    },

    initialize: function () {
        this.layout = new LayoutView();
    }

    home: function () {
        this.layout.render(new ResumeList({
            collection: new ResumeCollection()
        }));
    }
});

这是布局视图，所有其他视图都在其中渲染：

var LayoutView = Backbone.View.extend({
    el: $('#outlet'),
    render: function (view) {
        if (this.child && this.child !== view) {
            this.child.undelegateEvents();
        }

        this.child = view;
        this.child.setElement(this.$el).render();
        return this;
    }
}); 

当我刚刚刷新我的页面时，我得到了

过滤。toArray不是一个函数

错误，并且没有分别呈现任何内容。在检查了调试器中的所有内容后，我发现当视图第一次呈现时，

filtered

属性接收到一个空集合，将其分配给

data

变量，该变量将成为一个空数组，并进入

render

函数体，之后变为

未定义的
。谜团就在这里：每当我单击绑定到我的
show*
事件的项目时，它们的行为完全符合预期，并呈现
访谈===false
或
true
的模型或整个集合。这对我来说有点神奇，我一点也不知道我能用它做什么

添加了：
您的
审批程序上的
主页
功能有输入错误。你有一个额外的分号

home: function () {
    this.layout.render(new ResumeList({
        collection: new ResumeCollection();
    }));
}

应该是

home: function () {
    this.layout.render(new ResumeList({
        collection: new ResumeCollection()
    }));
}

我需要删除它才能让JSFIDLE正常工作：

我建议您在IDE或构建过程中添加某种linting工具（）
您需要像这样将主url内容添加到db.json文件中

"" : [
    {
       'somthing': 'somthing'
    }
]

在得到导师的建议后，我意识到问题的核心在于
fetch
方法的异步起源——当我在初始化函数中传递
this.collection.fetch
时，它在我的
render
方法之后执行，而不是在它之前执行，因此，在第一次调用视图时，我的
render
方法没有任何可渲染的内容。因此，这一修正方案起到了作用：

var ResumeList = Backbone.View.extend({
    initialize: function (options) {
         this.collection = options.collection();
         // removed .fetch() method from here
    },
    render: function (filtered) {
        var self = this;
        var data;
        // and added it here:
        this.collection.fetch({
            success: function (collection) {
                if (!filtered) {
                    data = collection.toArray();
                } else {
                    data = filtered.toArray();
                }
                self.$el.html(self.template(collection.toJSON()));
                _.each(data, function (cv) {
                   self.$el.append((new ResumeView({model: cv})).render().$el);
               })
            }
        });
    }
});

这完全符合我的需要。
您能从调试器中附加调用堆栈的最后几行吗？另外，您没有包括显示如何首先呈现此简历列表的代码。您的
showAll
函数传递了
this.collection
，我想更好的方法是不传递任何内容，并依赖渲染内部的逻辑来选择默认值，即
this.collection
。最后一件事-
var data=（过滤的| | this.collection）.toArray（）
-稍微少一点冗长？这导致了更多的问题，它没有显示任何对
render（）
@mikeapr4的调用。我有一个
布局
视图，可以呈现其他类似于他的子视图的视图-这很有效，有什么不同吗？@mikeapr4一切都一样，这有点神奇。在我的问题中，这是一个拼写错误，我已经仔细检查了我的代码，它似乎没有这样的拼写错误，但它无论如何都不起作用。我可以提供一个到github的链接，如果它有用的话。不幸的是，这没有帮助：（同样的事情：（因此，您需要使用主干集合解析函数，而不是filterActive或filterInterviewedbackend，因为当我单击我的按钮时，它确实会返回集合中我需要的项目，但这些项目没有帮助，链接到github是我的问题。）