How to save a Collection with backbone.js

Question

I have a hierarchy of categories. I use a jquery library for the hierarchy to get all jumbled up the way the user wants. Then they click save. So the initial hierarchy and hierarchy to be saved could be totally different.

The hierarchy is represented as a collection and I use parentIds to build a tree using ol and li tags.

When the user clicks save, I then need to update all the items in the collection with their new parentId and sync each one with the server.

I'm wondering if anyone has any advice on how to proceed here. I've seen in the documentation for Backbone.sync, ''Use setTimeout to batch rapid-fire updates into a single request.'' So, if I understand correctly, I would queue each of the calls to Backbone.sync and then use setTimeout to send my queue to the server after a few seconds?

Also, if I rewrite Backbone.sync, don't I still need a 'save' method somewhere for the collection that will parse the json of the response (the server response would have to send back a list of objects) and then call model.set on each item in the collection? Does any one have any example code?

Thanks!

score 21 · Answer 1 · answered Nov 02 '11 at 20:35

I ended up putting an updateAll method into my collection model. This worked like a dream:

Domain.PageList = Backbone.Collection.extend({  
  model: Domain.Page,   
  url: '_domainController/PageListController',
  comparator: function(page) {
    return page.get('ordering');
  },

  updateAll: function() {
    var collection = this;
    options = {
      success: function(model, resp, xhr) {
        collection.reset(model);
      }
    };
    return Backbone.sync('update', this, options);
  }
});

On the backend (I'm using PHP) I just get the data and save it to my database and return a new collection in JSON format.

Saved my evening :) Check this page also - http://api.jquery.com/jQuery.ajax/ `success` callback has different signature. Actually this is very strange - if `Bacbone.sync` is capable to send `PUT`/`update` for collections - why `Backbone.Collection` does not have `.save()` implemented?! — Gill Bates, Aug 02 '13 at 18:50

score 6 · Accepted Answer · edited Nov 04 '11 at 23:30

6

I'm not sure I fully understand the context. It is something like this: you have one collection with all the categories, and keep the hierarchy using the property parentId. The user changes the hierarchy and then you want to save the hierarchy (implicitly, save the collection that now contains different parentId's).

If that is correct, what I would do is:

make a PUT /categories action that accepts a hash of {id: parentId} and updates the the all the categories with this data.
when saving, I would call Backbone.sync('update', categories_collection, {data: a_hash_of_{id:parent_id}, success: your_success_callback). This should work without any other overriding, if you specify url for your categories, and in the success callback you can simply reset the collection with the new data.

This is not full REST, but it has the advantage of firing only one update request no matter how many categories you have.

edited Nov 04 '11 at 23:30

Benoit Garret

14,027
4
59
64

answered Nov 02 '11 at 11:31

dira

4,671
2
22
17

Thanks for your reply @dira. You understand the problem perfectly. I like your solution. Is it weird to just make a 'savecollection' method on my view and call Backbone.sync directly? I suppose I would do nearly the exact same thing as Backbone.Model.save ?? (that is, call Backbone.sync and then parse the response and then call collection.reset with the new data?). – Nick Lang Nov 02 '11 at 18:27
You might consider using PATCH instead of PUT, because PUT is to update all the fields, while PATCH is designed to be used for partial update of objects – venimus Jun 26 '13 at 15:29
Explain please why this is not full REST? – Gill Bates Aug 02 '13 at 17:11

How to save a Collection with backbone.js

2 Answers2

Linked