Backbone.js 主干模型和集合

请帮助我理解代码无法正常工作的原因 我的代码：

工作示例

但我得到的不是预期的组列表，而是不正确的组 我试图得到以下列表：

• 所有对象
  • 首先
  • 第二
  • 第三
  • 第四
  • 第五
• 第一组
  • 首先
  • 第三
• 第二组
  • 第三
  • 第四
• 诺丁群
  • 第二
  • 第五

upd：组和链接可以在不同的时间出现，因此它们的接收顺序并不重要。问题在于，出于某种原因，模型组增加了额外的价值，而这不应该存在

---

添加了屏幕截图。请查看突出显示的更改

此解决方案无法解决我的问题，因为树无效。组和链接可以在不同的时间出现，因此它们的接收顺序并不重要。在这种情况下，问题在于出于某种原因，模型组增加了额外的价值，而这不应该存在

var Link = Backbone.Model.extend({
    defaults : {
        groups: [] 
    }
});

var LinkCollection = Backbone.Collection.extend({
    model:Link,
    url: 'item.json'
});

var Group = Backbone.Model.extend({
    defaults: {
        links: []
    },
    initialize : function() {
        this.on("all" , function(event) {
            console.log(event);
        });
        this.on("change:links" , function() {
            console.log(this.get("links").length , this.id);
        })
    },
    setLink: function(link) {
        var links = this.get("links"); 
        links.push(link);
        this.set("links" , links);
        this.trigger("change:links" , this);
    },
    removeLink : function(link) {
        var links = this.get("links") , index = links.indexOf(link);
        links.splice(index , 1);
        this.set("links" , links);
        this.trigger("change:links" , this);

    }
});

var GroupCollection = Backbone.Collection.extend({
    model:Group,
    url: 'group.json',
    setLinks : function(links) {
        var self = this;
        this.links = links; 
        this.links.on('all' , function(event) {
            console.log(event);
        });
        this.links.on('add' , self.setLink , this);
        this.links.on('remove' , this.removeLink , this);
        this.links.on('reset' , this.resetLinks , this);
    },
    setLink : function(link) {
        var self = this , test = false;
        if(self.length ) {
            link.get('groups').forEach(function(groupId) {
                var group = self.get(groupId);
                console.log(group , groupId);
                if( group ) {
                    test = true;
                    group.setLink(link);
                }
            });

            if(!test) {
                self.get("notInGroup").setLink(link);
            }

            self.get("allObjects").setLink(link);
        }
    },
    resetLinks : function() {
        this.links.each(this.setLink);
    },
    initialize: function() { 
        var self = this;
        this.on('reset' , self.resetLinks , this);

    },
    removeLink: function(link) {
        var self = this;
        link.get('groups').forEach(function(groupId) {
            var group = self.get(groupId);
            if(group) {
                group.removeLink(link);
            }
        })
    }
});


var LinkView = Backbone.View.extend({
    tagName: 'li',
    className : 'list-item',
    template: _.template($("#ListView").html()),
    render: function() { 
        this.$el.html(this.template(this.model.toJSON()));
        return this
    }
}); 

var GroupView = Backbone.View.extend({
    tagName : 'li',
    className: 'group-list ',
    template: _.template($("#GroupView").html()),
    initialize: function() {
        this.model.on('remove', function() {
           console.log('remove');
        }); 
        this.model.on('reset' , function() {
            console.log('reset');
        });

        this.model.on('destroy' , function() {
            console.log('destroy')
        });
    },
    render: function() {
        var model = this.model.toJSON();
        this.$el.html(this.template(model));
        this.renderLinks(this.model);
        this.model.on('change:links' , this.renderLinks.bind(this));
        return this;
    },
    renderLinks : function(group) {
        var self = this;
        self.$el.find("ul").empty();
        group.get("links").forEach(function(link) {
            var view = new LinkView({model: link});
            self.$el.find("ul").append(view.render().el);
        });
    }
})

var App = Backbone.View.extend({
    el: $('#content'),
    initialize: function() {

        this.links = new LinkCollection();
        this.groups = new GroupCollection();
        this.groups.setLinks(this.links);
        this.groups.bind('add', this.addGroup, this);
        this.groups.bind('reset', this.addGroups, this);
        this.links.fetch();
        this.groups.fetch({reset: true}); 
        return this;
    },
    render: function() {
        this.$el.html($('#GroupListView').html())
    },
    addGroup: function(model) {

        var view = new GroupView({model: model});
        this.$("ul.group-list").append(view.render().el);
    },
    addGroups: function() {
        this.groups.each(this.addGroup)
    }
})
$(function() {
     var app = new App();
     app.render();
})