Question

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

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

当我刚刚刷新页面时，出现filtered.toArray is not a function错误，并且没有任何内容分别呈现。在检查调试器中的所有内容之后，我发现当第一次呈现视图时，filtered属性接收到一个空集合，将其分配给data变量，该变量变为空数组并且去到render函数的主体，之后成为undefined。谜团在这里：每当我点击与我的show*事件绑定的项目时，它们的行为与预期完全一致，并呈现interviewed === false或true或整个集合中的模型。这看起来对我来说有点神奇，而且我对此无法理解该怎么做。

已添加：GitHub repo with this project

Answer 1

home上的AppRouter功能有拼写错误。你有一个额外的分号。

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

应该是

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

我需要删除它以使JSFiddle正常工作：https://jsfiddle.net/4gyne5ev/1/

我建议在IDE或Build过程中添加某种linting工具（http://eslint.org/）

Answer 2

您需要将家庭网址内容添加到您的db.json文件中，如此

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

Answer 3

在我的导师的一条建议之后，我意识到问题的核心是foreach (var task in taskResult.Results) { var owner = task["Owner"]; if (owner != null) { var ownerName = owner["_refObjectName"]; //todo: do something here } }方法的异步起源 - 当我在初始化函数中传递fetch时，它在我的{之后执行} {1}}方法，而不是之前的方法，所以我的this.collection.fetch方法在第一次调用视图时没有任何东西可以渲染。所以，这个修复工作：

render

这完全正确地完成了我的工作。

渲染视图将返回undefined

3 个答案: