Question

I just don’t have idea what causes problem and need help. Before posting I’ve came up to alternative solution, but I want to learn why this is not working properly.

I have router that initialize view which initialize entity collection and views like so:

advertiser_manage_campaign: function () {
    this.campaignListView = new window.CampaignListView;
    this.mainSidebar = new window.MainSidebar;
},

CampaignListView:

window.CampaignListView = Backbone.View.extend({

    el: ("#right_column"),

    initialize: function () {   
        this.render();

        this.campaignCollection = new Campaign.CampaignCollection;
        this.campaignCollectionView = new Campaign.CampaignCollectionView({ model: this.campaignCollection });
        this.campaignCollection.fetch();
    },

    events: {
        "click .campaign_dialog": "openCampaignDialog"
    },

    openCampaignDialog: function (e) {        
        var that = this;
        var itemID = $(e.target).attr("item-id");
        var model = {}; //model to populate dialog inputs
        if (!isNaN(itemID))
            model = this.campaignCollection.get(itemID).toJSON(); //get existing model from collection <- after described procedure, error

        Campaign.Dialog.open(model, function (data) {
            if (isNaN(itemID)) {//model does not exist, create
            that.campaignCollection.create(data, { wait: true,
                    error: function (model, error) {
                        dialoger.showErrors(JSON.parse(error.responseText).errors);
                    },
                    success: function (mdl, response) { window.Campaign.Dialog.close(); }
                });               

            } else {//model exist, update
                model = that.campaignCollection.get(itemID);
                model.save(data, { wait: true,
                    error: function (mdl, error) {
                        dialoger.showErrors(JSON.parse(error.responseText).errors);
                    },
                    success: function (mdl, response) { window.Campaign.Dialog.close(); }
                });
            }
        });
        return false;
    },

    render: function () { 
        $(this.el).html(window.Templates.getHTML("campaign_list_view", {}));
        $(".button", $(this.el)).button();
    }
});

–

openCampaignDialog 

is for both edit models and creating new. Every view(table row) of model
has button with class “.campaign_dialog” and there is button for adding new model with same class.

Campaign.Dialog.open

shows dialog populated with model and in callback returns JSON from dialog form.

If I create new model via dialog, I can edit it right away, but when I create new model, change view, back to this view, create again new model, change view and then again back, click edit on last added item, I get error on commented line as model with this ID is not in collection, although it is. Response from server is OK. Obviously, I’m doing something wrong and after one day, I don’t see what it is.

Alternative solution I’ve came up to is to create and populate dialog from event of model view (this works), but I thought that CampaingCollectionView or CampaingView should not deal with adding or editing models so I’ve implemented this in ‘higher’ view.

Thanks everyone for helping me…

Edit:

var CampaignCollectionView = Backbone.View.extend({

    el: (".content_table tbody"),

    initialize: function () {
        this.model.bind("reset", this.render, this);
        this.model.bind("add", this.add, this);
    },

    render: function () {
        $(this.el).empty();
        _.each(this.model.models, function (campaign) {
            $(this.el).append(new CampaignView({ model: campaign }).render().el);
        }, this);
        return this;
    },

    add: function (model) {
        window.Appender.AppendAndScroll($(new CampaignView({ model: model }).render().el), this.el);
    }

});

Answer 1

I’ve found solution.

Problems arise, though, when we bind objects together through these
events but we don’t bother unbinding them. As long as these objects
are bound together, and there is a reference in our app code to at
least one of them, they won’t be cleaned up or garbage collected. The
resulting memory leaks are like the zombies of the movies – hiding in
dark corners, waiting to jump out and eat us for lunch.

Source: http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

Author suggests unbinding mechanism, but I’m going to reuse same objects if exist.

Router:

advertiser_manage_campaign: function () {
    if (!this.campaignListView)
        this.campaignListView = new window.CampaignListView;
    else
        this.campaignListView.initialize();


    this.mainSidebar = new window.MainSidebar;
},

If someone thinks this is not best solution, I would like to hear why.

Thank you all who tried to help!