在骨干中保存方法后将模型添加到集合中

时间:2014-08-26 21:54:47

标签: backbone.js

我提交数据时使用的是save方法。在成功回调save方法时,应该使用我保存的模型更新集合,因为我想从服务器获取模型的id。我的代码如下

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

收藏是

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

});

模型是

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

查看

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;

    }
});

1 个答案:

答案 0 :(得分:0)

在您的成功回调中,您创建了一个全新的集合,该集合没有注册任何侦听器。这就是为什么renderDone没有被触发的原因。

您从服务器收到的模型应添加到直接附加到您的视图的集合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');
    }

});