Changing view in backbone : Maximum Call Stack Excedeed

Question

I have a view in backbone application that explains to user they don't have any data to display, and to click a button to create some data.

Creating some data sends a POST request to my server, and in turn adds a model a to a collection, the collection has a listener on it.

this.listenTo(this.collection, "add", this.addOneClient);

From above you can see that this then fires a method,

addOneClient: function(model) {

    if(this.collection.length == 1) {
        this.$el.empty(); 
        this.render();
    }

    var clientEntry = new Pops.Views.ClientListEntry({
        model : model,
        user : this.options.user
    });

    this.$('.client-list-table').append(clientEntry.render().el);
},

So basically it add one view to a parent view, but checks if the model is the only one on a collection as if it is, we need to remove the no data view, and create the parent view, the parent view is created in the render method,

render: function() {

        if(this.model.get('clients').length > 0) {

            this.$el.html( this.template({ //Originally Maximum callstack was being exceeded here
                organisation : this.model.toJSON(),
                user: this.options.user.toJSON()
            }));

        } else {

            var noView = new Pops.Views.NoView({
                text : "There are currently no clients, <a href='#' data-create='client'>click here</a> to create one."
            });

            return this.$el.html( noView.render().el );
        }

        var filter = Pops.Session.get('organisation_filters').findWhere({ organisation_id : this.model.get('id') });
        var sorting = filter.get('list_sorting').split(",");

        this.collection.sortByField(sorting[0], sorting[1]);

        this.$('.js-sort-client-projects').removeClass('active');

        if(sorting[1] == "desc") {
            this.$('.js-sort-client-projects[data-sort="' + sorting[0] + '"]').attr('data-order', 'asc');
            this.$('.js-sort-client-projects[data-sort="' + sorting[0] + '"]').removeClass('desc').addClass('asc active');
        } else {
            this.$('.js-sort-client-projects[data-sort="' + sorting[0] + '"]').attr('data-order', 'desc');
            this.$('.js-sort-client-projects[data-sort="' + sorting[0] + '"]').removeClass('asc').addClass('desc active');
        }

        this.addAll(); //Added this.$el.empty to addOne method, maximum callstack being exceeded here now.
    },

Originally the Maximimum call stack was being exceeded in the render method, when I push the template into this.$el, I then empty this.$el in my addOneMethod, and the call stack is exceeded when I call the addAll method,

addAll: function() {
        this.$('.client-list-table').find('tbody').empty();
        this.collection.each(this.addOneClient, this);
    },

I have no idea what is wrong with my code, can anyone shed any light?

Answer 1

Hmmm, i think problem here

addOneClient -> render -> addAll -> addOneClient