Bug while creating object in View

Question

I'm working on a backbone.js project which is mainly to learn backbone framework itself.

However I'm stuck at this problem which i can't figure out but might have an idea about the problem...

I've got an Create View looking like this...

define(['backbone', 'underscore', 'jade!templates/addAccount', 'models/accountmodel', 'common/serializeObject'], 
function(Backbone, underscore, template, AccountModel, SerializeObject){
return Backbone.View.extend({
    //Templates
    template: template,
    //Constructor
    initialize: function(){
        this.accCollection = this.options.accCollection; 
    },
    //Events
    events: {
        'submit .add-account-form': 'saveAccount'
    },
    //Event functions
    saveAccount: function(ev){
        ev.preventDefault();
        //Using common/serializeObject function to get a JSON data object from form
        var myObj = $(ev.currentTarget).serializeObject();
        console.log("Saving!");
        this.accCollection.create(new AccountModel(myObj), {
            success: function(){
                myObj = null;
                this.close();
                Backbone.history.navigate('accounts', {trigger:true});
            },
            error: function(){
                //show 500?
            }
        });
    },
    //Display functions
    render: function(){
        $('.currentPage').html("<h3>Accounts <span class='glyphicon glyphicon-chevron-right'> </span> New Account</h3>");
        //Render it in jade template  
        this.$el.html(this.template());

        return this;
    }
});

});

The problem is that for every single time I visit the create page and go to another and visit it again. It remebers it, it seems. And when i finally create a new account I get that many times I've visited total number of accounts... So console.log("Saving!"); in saveAccount function is called x times visited page... Do I have to close/delete current view when leaving it or what is this?

EDIT Here's a part of the route where i init my view..

"account/new" : function(){
                var accCollection = new AccountCollection();
                this.nav(new CreateAccountView({el:'.content', accCollection:accCollection}));
                console.log("new account");
           },

/Regards

Answer 1

You have zombie views. Every time you do this:

new CreateAccountView({el:'.content', accCollection:accCollection})

you're attaching an event listener to .content but nothing seems to be detaching it. The usual approach is to call remove on a view to remove it from the DOM and tell it to clean up after itself. The default remove does things you don't want it to:

remove: function() {
  this.$el.remove();
  this.stopListening();
  return this;
}

You don't want that this.$el.remove() call since your view is not responsible for creating its own el, you probably want:

remove: function() {
  this.$el.empty();        // Remove the content we added.
  this.undelegateEvents(); // Unbind your event handler.
  this.stopListening();
  return this;
}

Then your router can keep track of the currently open view and remove it before throwing up another one with things like this:

if(this.currentView)
    this.currentView.remove();
this.currentView = new CreateAccountView({ ... });
this.nav(this.currentView);

---

While I'm here, your code will break as soon as you upgrade your Backbone. As of version 1.1:

• Backbone Views no longer automatically attach options passed to the constructor as this.options, but you can do it yourself if you prefer.

So your initialize:

initialize: function(){
    this.accCollection = this.options.accCollection; 
},

won't work in 1.1+. However, some options are automatically copied:

constructor / initialize new View([options])

There are several special options that, if passed, will be attached directly to the view: model, collection, el, id, className, tagName, attributes and events.

so you could toss out your initialize, refer to this.collection instead of this.accCollection inside the view, and instantiate the view using:

new CreateAccountView({el: '.content', collection: accCollection})