2012-05-14 63 views
14

我一直在嘗試幾天得到這個工作,我只是無法弄清楚爲什麼當我有我的視圖摧毀一個模型屬於一個集合(正確具有用於模型數據的開始提取的url屬性),僅觸發通過列表視圖輕鬆綁定到集合的destroy'event'。但它永遠不會向服務器發送實際的DELETE請求或任何請求。無處不在,我看到每個人都使用集合的url attr,或者如果模型沒有連接到集合,則會使用urlRoot。我甚至在實際的this.model.destroy()之前進行了測試,以檢查模型< console.log(this.model.url());Backbone.js model.destroy()不發送DELETE請求

我沒有覆蓋破壞或同步方法的主幹。此外,每個模型都有一個id屬性,通過集合的提取(從數據庫記錄)填充。

銷燬發生在列表項視圖中,並且集合的「銷燬」事件在列表視圖中被綁定。所有這一切都很好(事件處理),但問題再一次是沒有對服務器的請求。

我希望backbone.js能自動完成。這就是文檔所暗示的,以及無處不在的例子。

非常感謝任何能提供有用信息的人。

僅供參考:我正在開發wampserver PHP 5.3.4。

ListItemView = BaseView.extend({ 

    tagName: "li", 

    className: "shipment", 

    initialize: function (options) { 
     _.bindAll(this); 
     this.template = listItemTemplate; 
     this.templateEmpty = listItemTemplateEmpty; 
    }, 

    events: { 
     'click .itemTag' : 'toggleData', 
     'click select option' : 'chkShipper', 
     'click .update' : 'update', 
     'click button.delete' : 'removeItem' 
    }, 

    // .... 

    removeItem: function() { 
     debug.log('remove model'); 

     var id = this.model.id; 

     debug.log(this.model.url()); 

     var options = { 
      success: function(model, response) { 
       debug.log('remove success'); 
       //debug.log(model); 
       debug.log(response); 
       // this.unbind(); 
       // this.remove(); 
      }, 
      error: function(model, response) { 
       debug.log('remove error'); 
       debug.log(response); 
      } 
     }; 

     this.model.destroy(options); 


     //model.trigger('destroy', this.model, this.model.collection, options); 


    } 

}); 


Collection = Backbone.Collection.extend({ 

    model: Model, 

    url: '?dispatch=get&src=shipments', 
    url_put : '?dispatch=set&src=shipments', 

    name: 'Shipments', 

    initialize: function() { 
     _.bindAll(this); 
     this.deferred = new $.Deferred(); 
     /* 
     this.fetch({ 
      success: this.fetchSuccess, 
      error: this.fetchError 
     }); 
     */ 
    }, 

    fetchSuccess: function (collection, response) { 
     collection.deferred.resolve(); 
     debug.log(response); 
    }, 

    fetchError: function (collection, response) { 
     collection.deferred.reject(); 
     debug.log(response); 
     throw new Error(this.name + " fetch failed"); 
    }, 

    save: function() { 
     var that = this; 
     var proxy = _.extend(new Backbone.Model(), 
     { 
      url: this.url_put, 
      toJSON: function() { 
       return that.toJSON(); 
      } 
     }); 
     var newJSON = proxy.toJSON() 
     proxy.save(
      newJSON, 
      { 
       success: that.saveSuccess, 
       error: that.saveError 
      } 
     ); 
    }, 

    saveSuccess: function(model, response) { 
     debug.log('Save successful'); 
    }, 

    saveError: function(model, response) { 
     var responseText = response.responseText; 
     throw new Error(this.name + " save failed"); 
    }, 

    updateModels: function(newData) { 
     //this.reset(newData); 
    } 

}); 



ListView = BaseView.extend({ 

    tagName: "ul", 

    className: "shipments adminList", 

    _viewPointers: {}, 

    initialize: function() { 
     _.bindAll(this); 
     var that = this; 
     this.collection; 
     this.collection = new collections.ShipmentModel(); 
     this.collection.bind("add", this.addOne); 

     this.collection.fetch({ 
      success: this.collection.fetchSuccess, 
      error: this.collection.fetchError 
     }); 


     this.collection.bind("change", this.save); 
     this.collection.bind("add", this.addOne); 
     //this.collection.bind("remove", this.removeModel); 
     this.collection.bind("destroy", this.removeModel); 
     this.collection.bind("reset", this.render); 
     this.collection.deferred.done(function() { 
      //that.render(); 
      that.options.container.removeClass('hide'); 
     });    

     debug.log('view pointers'); 

     // debug.log(this._viewPointers['c31']); 
     // debug.log(this._viewPointers[0]); 

    }, 

    events: { 

    }, 

    save: function() { 
     debug.log('shipments changed'); 
     //this.collection.save(); 
     var that = this; 
     var proxy = _.extend(new Backbone.Model(), 
     { 
      url: that.collection.url_put, 
      toJSON: function() { 
       return that.collection.toJSON(); 
      } 
     }); 
     var newJSON = proxy.toJSON() 
     proxy.save(
      newJSON, 
      { 
       success: that.saveSuccess, 
       error: that.saveError 
      } 
     ); 
    }, 

    saveSuccess: function(model, response) { 
     debug.log('Save successful'); 
    }, 

    saveError: function(model, response) { 
     var responseText = response.responseText; 
     throw new Error(this.name + " save failed"); 
    }, 

    addOne: function(model) { 
     debug.log('added one'); 
     this.renderItem(model); 
     /* 
     var view = new SB.Views.TicketSummary({ 
      model: model 
     }); 
     this._viewPointers[model.cid] = view; 
     */ 
    }, 

    removeModel: function(model, response) { 
     // debug.log(model); 
     // debug.log('shipment removed from collection'); 

     // remove from server 
     debug.info('Removing view for ' + model.cid); 
     debug.info(this._viewPointers[model.cid]); 
     // this._viewPointers[model.cid].unbind(); 
     // this._viewPointers[model.cid].remove(); 
     debug.info('item removed'); 
     //this.render(); 
    }, 

    add: function() { 
     var nullModel = new this.collection.model({ 
      "poNum" : null, 
      "shipper" : null, 
      "proNum" : null, 
      "link" : null 
     }); 
     // var tmpl = emptyItemTmpl; 
     // debug.log(tmpl); 
     // this.$el.prepend(tmpl); 
     this.collection.unshift(nullModel); 
     this.renderInputItem(nullModel);     
    }, 

    render: function() { 
     this.$el.html(''); 
     debug.log('list view render'); 
     var i, len = this.collection.length; 
     for (i=0; i < len; i++) { 
      this.renderItem(this.collection.models[i]); 
     }; 
     $(this.container).find(this.className).remove(); 

     this.$el.prependTo(this.options.container); 

     return this; 
    },   

    renderItem: function (model) { 
     var item = new listItemView({ 
      "model": model 
     }); 

     // item.bind('removeItem', this.removeModel); 

     // this._viewPointers[model.cid] = item; 
     this._viewPointers[model.cid] = item; 
     debug.log(this._viewPointers[model.cid]); 
     item.render().$el.appendTo(this.$el); 
    }, 

    renderInputItem: function(model) { 
     var item = new listItemView({ 
      "model": model 
     }); 
     item.renderEmpty().$el.prependTo(this.$el); 
    } 

}); 

P.S ...再次,有從別處引用的代碼。但是請注意:集合確實有一個url屬性集。它在初始抓取時以及爲保存對模型所做的更改而觸發更改事件時都有效。但是,列表項視圖中的銷燬事件雖然成功觸發了「銷燬」事件,但不會發送「刪除」HTTP請求。

+1

什麼版本的骨幹,發佈一些代碼總是有幫助,jsFiddle總是很棒 –

+0

是的請與我們分享一個非常簡單的代碼示例,重現此問題。 – fguillen

+1

你確定你已經在模型的擴展中包含了你的api的基礎url嗎? – kinakuta

回答

39

您的模型是否有ID?否則,HTTP請求將不會被髮送。 - nikoshr 5月14日18:03

非常感謝! Nikoshr的小評論正是我所需要的。我花了最近5個小時搞亂了這個。我只需要在我的模型中添加一個id到默認值。

+2

要小心,將id屬性添加到默認值將會破壞Backbone.Model.isNew(),然後.save()的POST和PUT。 – GijsjanB

+1

爲什麼這個答案不被接受:/(Y) – Tamil

+0

我認爲盎司。在Stackoverflow是一個新手,他不知道如何做到這一點。 –