backbone model and collection

Question

help me understand why the code is not working properly my code:

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

working example http://plnkr.co/edit/40CCIq0jt2AdmGD61uAn

but instead of the expected list of groups I get incorrect group this list i tried to get:

• All Objects
  • First
  • Second
  • Third
  • Fourth
  • Fifth
• FirstGroup
  • First
  • Third
• SecondGroup
  • Third
  • Fourth
• NotInGroup
  • Second
  • Fifth

upd: Groups and Links can come at different times, so the order of their receipt is not critical. the problem is that for some reason the models groups added extra value, which should not be there

Answer 1

Screenshot added. Please look at the highlighted change