Geek Answers Handbook

Method to destroy Backbone.js model does not cause success or error event

I am starting to learn Backbone.js and I started with this template and made an example by loading the JSON data from a static file to disk and displaying it in the html table.

Then I tried to bind an event on a button that should remove an item from the collection, and then from the DOM. Everything works fine, a click fires the destroy method, the remove event fires in the collection, but nothing comes out of the success or error destroy callbacks

Does anyone have a key?

Model:

 define([ 'underscore', 'backbone' ], function(_, Backbone) { var memberModel = Backbone.Model.extend({ url: "/members.json", defaults: { email: "", firstname: "", lastname: "", gender: "", language: "", consent: false, guid: "", creationDate: "" }, initialize: function(){ } }); return memberModel; });

View:

 define([ 'jquery', 'underscore', 'backbone', 'mustache', 'collections/members', 'text!templates/members/page.html' ], function($, _, Backbone, Mustache, membersCollection, membersPageTemplate){ var membersPage = Backbone.View.extend({ el: '.page', initialize: function(){ this.members = new membersCollection(); this.members.on('remove', function(){ // works fine $('.members-body tr').first().remove(); console.log('removed from collection'); }); }, render: function () { var that = this; this.members.fetch({success: function(){ var wrappedMembers = {"members" : that.members.toJSON()}; that.$el.html(Mustache.render(membersPageTemplate, wrappedMembers)); $('#delete-member').click(function(){ that.members.at(0).destroy({ // prints nothing!!! success: function(){ console.log('sucess'); }, error: function(){ console.log('error'); } }); }); }}); } }); return membersPage; });
+7
source share
1 answer

I agree that this is strange. I'm not quite sure what is happening, but here is what I suspect ...

Your calls to Destroy() do not return valid JSON.

  • Watching firebug, fiddler, etc., what do your destroy () reactions look like?
  • I am also interested in that when you run the click delete function.
  • Kill return false or jqXHR object?

There is a bit of disconnection in the spine (at least I was for me at first). When calling Destroy() or fetch / save, the call will be asynchronous. Immediately after the call, a delete event occurs, and your collection can respond. But, delving a little deeper into the documentation, another event is triggered by confirmation of deletion:

and the synchronization event, after , the server successfully confirmed the removal of the model

So, your collection operates on the basis of the presumption that the deletion succeeded. If you want your collection to respond to a confirmed deletion, find the sync event.

This leaves one point to be said - why doesn't your error handler work? Well, callbacks are designed to respond to confirmation of deletion. But I'm sure the JS call stack does not know how to interpret the answer it returns as success or error. You probably stumbled upon the realities of AJAX. I found in the spine, jquery, and a bunch of other frameworks that you might be confused by ajax error handling. Google "jquery ajax error not called" and you will find many different scenarios in which the error event does not fire.

UPDATE

After the comments back and forth ... two things happen. First, your model is perceived as "new", which means that Destroy() calls do not fulfill server requests. As a result, your success / error does not work. See this commit .

With that said, I don’t think you think your model is new (not persisted on the server). You need to do one of two things. Either include a property called id OR in your model model of your model identifier ( guid I assume) to the model identifier. Mapping is easy by applying the following model to your model: idAttribute: "guid" . You can see more on idAttribute here .

+7
source

More articles:


All Articles