CODEWITHSUNDEEP
backbone.js
dhruv
dhruv

Reputation: 19

Adding model to a collection after save method in backbone

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;

    }
});

Upvotes: 0

Views: 1150

Answers (1)

Akos K
Akos K

Reputation: 7133

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');
    }

});

Upvotes: 0

Related Questions