Adding model to a collection after save method in backbone

Question

I am using the save method when my data is submitted. On success callback of the save method, the collection should be updated with the model which i have saved since i want to get the id of the model from my server. My code is as below

var app = app || {};
app.AllDoneView = Backbone.View.extend({

el: '#frmAddDone',

events:{
'click #addDone':'addDone'
},

addDone: function(e ) {
e.preventDefault();
var formData = {

        doneHeading: this.$("#doneHeading").val(),
        doneDescription: this.$("#doneDescription").val(),

        };
var donemodel = new app.Done();
   donemodel.save(formData,

   {
       success :function(data){

      /*my problem is here how do i listen to collection event add that has been
        instantiated in intialize property to call renderDone . My tried code is

        var donecollection = new app.AllDone();
        donecollection.add(donemodel);



        and my response from server is
       [{id:145, doneHeading:heading , doneDescription:description,                  

         submission_date:2014-08-27 03:20:12}]





       */

       }, 
       error: function(data){

           console.log('error');
       },

    });
   },
  initialize: function() {
  this.collection = new app.AllDone();
  this.collection.fetch({
          error: function () {
          console.log("error!!"); 
        },
        success: function (collection) {
        console.log("no error");

      }
   });
  this.listenTo( this.collection, 'add', this.renderDone );


 },

 renderDone: function( item ) {
    var doneView = new app.DoneView({
        model: item
    });

    this.$el.append( doneView.render().el );
 }
 });

Collection is

var app = app || {};
app.AllDone = Backbone.Collection.extend({
url: './api',
model: app.Done,

});

Model is

var app = app || {};
app.Done = Backbone.Model.extend({
url: "./insert_done",
});

View is

var app = app || {};
app.DoneView = Backbone.View.extend({

template: _.template( $( '#doneTemplate' ).html() ),

render: function() {
    function
    this.$el.html( this.template( this.model.attributes ) );
    return this;

    }
});

`this` in your `success` callback refers to the callback method itself, which apparently doesn't have any `this.collection` variable. — Akos K, Aug 26 '14 at 22:10
How do i add the model to my collection in success callback, also the same collection should be able to call the renderDone method because i need to update the view — dhruv, Aug 26 '14 at 22:32

score 0 · Accepted Answer · answered Aug 27 '14 at 07:01

0

In your success callback you create an entirely new collection, which doesn't have any listeners registered. This is the reason why the renderDone isn't triggered.

The model you receive from the server should be added to the collection which is attached directly to your view, this.collection:

var self = this,
    donemodel = new app.Done();

donemodel.save(formData, {
    success :function(data){
        // this is the collection you created in initialize
        self.collection.add(donemodel);
    }, 
    error: function(data){
        console.log('error');
    }

});

answered Aug 27 '14 at 07:01

Akos K

6,711
3
30
43

1

you are awesome, and u helped me increase my knowledge. I am new to backbone. Thanks for the answer. – dhruv Aug 27 '14 at 12:07
i will be highly thankful to you if u help me understand the significance of the line, var self = this,donemodel = new app.Done(); – dhruv Aug 27 '14 at 12:35
There you go: http://stackoverflow.com/questions/962033/what-underlies-this-javascript-idiom-var-self-this – Akos K Aug 27 '14 at 12:43

Adding model to a collection after save method in backbone

1 Answers1