Collection add event listener in Backbone

Question

I am trying to update my view whenever I add a new model to my collection. My first question is do I automatically add a model to my collection when I save that model, like:

PostsApp.Views.Form = Backbone.View.extend({
    template: _.template($('#form-template').html()),
    render: function(){
        this.$el.html(this.template(this.model.toJSON()));
    },
    events:{
        'click button' : 'save'
    },

    save: function(e){
        console.log("is this working");
        e.preventDefault();
        var newname = this.$('input[name=name-input]').val();
        var newadress = this.$('input[name=adress-input]').val();
        this.model.save({name: newname, adress : newadress});
    }


});

or do I still have to do collection.add()

Other than that to see the new model in my view I am trying to add an 'add' event listener like this:

PostsApp.Views.Posts = Backbone.View.extend({
    initialize: function(){
        this.collection.on('add', this.addOne, this);

    },
    render: function(){
        this.collection.forEach(this.addOne, this);
    },

    addOne: function(post){
        var postView = new PostsApp.Views.Post({model:post});
        postView.render();
        this.$el.append(postView.el);
    }
});

This not only doesnt work, but when I add the initialize method, it just duplicates everything in my model when the page is first loaded.

Solution

Nope.. When you do a model.save , it will just create a zombie model ( If it not already a part of the collection .i.e If a New model is saved) which is not a part of any collection.

So your add event will not be triggered for the collection.

If you want the add event to be triggered , Use the create method of collection , which then will know on which collection the new model has to be added..

collection.create({model});

Then it would internally add the model to the collection and fire the add event

Also it is a better idea to use listenTo instead of attaching events using on

this.listenTo(this.collection, 'add', this.addOne);

Code

PostsApp.Views.Form = Backbone.View.extend({
    template: _.template($('#form-template').html()),
    render: function () {
        this.$el.html(this.template(this.model.toJSON()));
    },
    events: {
        'click button': 'save'
    },

    save: function (e) {
        console.log("is this working");
        e.preventDefault();
        var newname = this.$('input[name=name-input]').val();
        var newadress = this.$('input[name=adress-input]').val();
        this.collection.create({
            name: newname,
            adress: newadress
        });
    }
});

PostsApp.Views.Posts = Backbone.View.extend({
    initialize: function () {
        this.listenTo(this.collection, 'add', this.addOne);

    },
    render: function () {
        this.collection.forEach(this.addOne, this);
    },

    addOne: function (post) {
        var postView = new PostsApp.Views.Post({
            model: post,
            collection : this.collection
        });
        postView.render();
        this.$el.append(postView.el);
    }
});

Comments

[s_curry_s]

thanks where should this collection.create({model}); be in my code?

[Sushanth --]

So basically you would pass in the collection to the subView and in the save method of the subView you would need to use it

[s_curry_s]

I guess in the save method, so when I create a new formview I have to pass in a collection instead of a model?

[Sushanth --]

@GorkemYurtseven.. sure .. :)