Backbone.js Collections View forEach 不起作用答案

【问题标题】：Backbone.js Collections View forEach doesn't workBackbone.js Collections View forEach 不起作用
【发布时间】：2013-06-08 22:32:48
【问题描述】：

我正在尝试使用集合来列出来自我的 api 的数据。但问题是，当我使用 forEach 时，我调用的函数 (addOne) 没有运行。

还有一些我怀疑做错了。我的集合是否应该将返回的 JSON 保存在这样的模型下？

Object -> models -> 0 -> attributes -> ...

我的观点：

s.Views.Fs = Backbone.View.extend({
    className: "",
    template: _.template("<%= name %>"),
    initialize: function() {

    },
    render: function() {
        this.collection.forEach(this.addOne, this);
    },
    addOne: function(f) {
        alert("a");
        var fV = new s.Views.PF({model: f});
        this.$el.append(fV.render().el);
    }
});

我的收藏：

s.Collections.FL = Backbone.Collection.extend({
    url: "api/fs/",
    model: s.Models.F,
});

我的模特：

s.Models.F = Backbone.Model.extend( {
    urlRoot: 'api/fs/',
    defaults: {
        ...
    },
    ...
    parse: function(response) {
            return response;
    },
});

我的路线（和应用程序）：

var sApp = new (Backbone.Router.extend({
    f_a: function() {
        this.fL= new s.Collections.FL();
        this.fLV= new s.Views.Fs({collection: this.fL});
        this.fL.fetch();
        this.fLV.render();
    },
});

【问题讨论】：

fetch 是一个 AJAX 调用，您必须监听事件或添加一个 success 处理程序才能知道它何时获取一些数据。

标签： backbone.js backbone.js-collections

【解决方案1】：

监听事件是由this.collection.on('add', this.addOne, this);在collection的视图下进行的。这是测试代码的摘要（感谢提示'mu太短'）：

查看

s.Views.Fs = Backbone.View.extend({
    className: "",
    template: _.template("<%= name %>"),
    initialize: function() {
        this.collection.on('add', this.addOne, this);
        this.collection.on('reset', this.render, this);
    },
    render: function() {
        this.collection.forEach(this.addOne, this);
    },
    addOne: function(f) {
        var fV = new s.Views.PF({model: f});
        fV.render();
        this.$el.append(fV.el);
    }
});

s.Collections.FL = Backbone.Collection.extend({
    url: "api/fs/",
    model: s.Models.F,
});

型号

s.Models.F = Backbone.Model.extend( {
    urlRoot: 'api/fs/',
    // No need to parse here.
});

路由器

var sApp = new (Backbone.Router.extend({
    f_a: function() {
        this.fL= new s.Collections.FL();
        this.fLV= new s.Views.Fs({collection: this.fL});
        this.fLV.render();
        $("#content").html(this.fLV.el);
        this.fL.fetch();
    },
});

【讨论】：