Backbone Collection refresh all items

Question

I'm having problems refreshing collection or more precisely collection view after updating all models on the server. Here's my scenario:

1. I have a collection of questions fetched from the server. Each question has a position attribute so I can manipulate the order in the list and save it back to the server with appropriate order.

2. I have a view for each single list item and a view with a more global scope that generates each list items and updates the collection. Basically I was using an example from O'Reilly book "Javascript Web Applications" which resembles a lot to the famous Todo annotated tutorial found here: http://documentcloud.github.com/backbone/docs/todos.html So the structure is almost identical apart from a few custom models. Everythings works fine.

3. However, I'm having problems updating the collection with I reorder items in the I've a method in my global view which fires evert time I drag list items in the list. Btw it works well and updates the order of the items on the server, but I also want to be able to update the digit in from of each item in the list.

   window.QuestionView = Backbone.View.extend({
   
   el: $("#content"),
   events : {
       'sortupdate ol#questions': 'sortStuff'
   },
   
   initialize: function(collection) {
       this.collection = new QuestionsList;
   
       _.bindAll(this, 'addOne', 'addAll', 'render', 'addNewItem', 'addItem');
       this.collection.bind('add', this.addNewItem);
       this.collection.bind('all', this.render);
       this.collection.bind('reset', this.addAll);
       this.collection.fetch({
           data: { quiz_id: $qid },
           processData:true
       });
   },
   
   render: function() {},
   
   sortStuff: function() {
   
       $this = this;
       $.ajax({
           url: "/hq/reorder/",
           type: "POST",
           data: $("#questions").sortable("serialize")+"&id="+$qid,
           dataType: 'json',
           success: function(data) {
   
           }
       });
   },
   
   addItem: function() {
       this.collection.add({title: 'New title goes here'});
       return false;
   },
   
   addNewItem: function(question) {
       var view = new ItemView({model: question, parent: this});
       var element = view.render().el;
       this.$("#questions").prepend(element);
       $that = this;
       $(view.render().el).addClass('new');
   },
   
   addOne: function(question) {
     var view = new ItemView({model: question, parent: this});
     this.$("#questions").prepend(view.render().el);
   },
   
   addAll: function() {
     this.collection.each(this.addOne);
     return false;
   }
   

   });

So my question is.. what do I do on success: to be able to refresh each little model separately so it updates the digit to the proper order? Maybe some sort of _.each on Collection? Or maybe some sort of global view refresh on the whole collection?

Also my success: function(data) returns the new order as a list (or JSON object) from the server. maybe I can reuse this order to set each model with a new value without making unnecessary fetch() call on the server each time the order is changed?

EDIT:

I finally managed to get it to work with a reset, clearing the view and re-fetching a new collection. Perhaps it isn't the best way to do it since there's additional call to the server with a fetch()..

 sortStuff: function() {

        $this = this;
        $.ajax({
            url: "/hq/reorder/",
            type: "POST",
            data: $("#questions").sortable("serialize")+"&id="+$qid,
            dataType: 'json',
            success: function(data) {
                $this.rerender();
            }
        });


    },

    rerender: function() {

        this.collection.fetch({
            data: { quiz_id: $qid },
            processData:true
        });
        $("#questions").html("");
        this.collection.reset();
        this.addAll();
    },

Answer 1

I think your approach should be in two separate steps: 1) On one hand you update the data on the server 2) On the other hand you update the collection client-side

So, you are Ok on step 1, you said it works.

For step 2, you can take advantage of the event driven programming. The logic is this one:

1. YOU JUST ADD ONE ELEMENT TO THE COLLECTION (collection.add(model) fires an 'add' event).
2. In the collection, you listen for the 'add' event. When you catch it, you sort your collection again (collection.sort fires a 'reset' event)
3. In your view for the list (questionView in your case) you listen for the collection reset event, and once it is fired you re-render your view

Example code:

1) QuestionView: addItem removed and addNewItem simplified (it must no render)

 window.QuestionView = Backbone.View.extend({
 el: $("#content"),
 events : {
     'sortupdate ol#questions': 'sortStuff'
 },

 initialize: function(collection) {
     this.collection = new QuestionsList;
     _.bindAll(this, 'addOne', 'addAll', 'addNewItem');
     this.collection.bind('add', this.addNewItem);
     this.collection.bind('reset', this.addAll);
     this.collection.fetch({
     data: { quiz_id: $qid },
     processData:true
     });
 },

 render: function() {},

 sortStuff: function() {

     $this = this;
     $.ajax({
         url: "/hq/reorder/",
         type: "POST",
         data: $("#questions").sortable("serialize")+"&id="+$qid,
         dataType: 'json',
         success: function(data) {

         }
     });
 },

 //METHOD addItem REMOVED!!!


 addNewItem: function(question) {
     this.collection.add({title: 'New title goes here'}); //***IT FIRES AN ADD EVENT
     },

 addOne: function(question) {
   var view = new ItemView({model: question, parent: this});
   this.$("#questions").prepend(view.render().el);
 },

 addAll: function() {
   this.collection.each(this.addOne);
   return false;
 }

});

2) the collection catch the add event and sorts (trigger 'reset' event) you can handle it always in the QuestionView, your initialize function becomes.

 initialize: function(collection) {
     this.collection = new QuestionsList;
     _.bindAll(this, 'addOne', 'addAll', 'addNewItem');
     this.collection.bind('add', this.addNewItem);
     this.collection.bind('reset', this.addAll);
     this.collection.fetch({
     data: { quiz_id: $qid },
     processData:true
     });
     //ADD THIS*****
     this.collection.on('add', function(){
         this.collection.sort();
     });
 },

3) the third step is already done, you just re-render the view

The best would be that you sort elements in your collection defining a new 'comparator' function, which uses the 'position' attribute of your list

something like (in QuestionView)

this.collection.comparator: function(){
   return this.collection.get("position");
}

so that items get ordered by position CLIENT SIDE

**EDIT** Initialize function modified. Fetch is used instead of 'sort', which is unuseful as long as the 'position' attribute of each element in the collection is not updated.

 initialize: function(collection) {
     this.collection = new QuestionsList;
     _.bindAll(this, 'addOne', 'addAll', 'addNewItem');
     this.collection.bind('add', this.addNewItem);
     this.collection.bind('reset', this.addAll);
     this.collection.fetch({
     data: { quiz_id: $qid },
     processData:true
     });
     //ADD THIS*****
     this.collection.on('add', function(){
         this.collection.fetch();
     });

Answer 2

You should do Questions.reset(data);, however you need to tell ajax that the response is json:

sortStuff: function() {
   $.ajax({
     url: '/order',
     data: $("ol#questions").sortable('serialize'),
     dataType: 'json',
     success: function(data) {
        // now data is an object
        Questions.reset(data);
     });
   });
}

I hope you have learned that backbone is event driven, and that you have an event for collection reset bound to the render method, so there's no need to explicitly call render here.

EDIT:

Ok, now with the code I see what you're trying to accomplish, and your logic is flawed. You shouldn't wait for the ajax call to return the new order. It's better if you update the order on the client side, and then save the model.

Here's a jsfiddle sample: http://jsfiddle.net/b75px/

Combine that with backbone, and you should have:

Note that I'm just guessing how you have organized the questions. If you have any other problems, update your question with more details.

events: {
    'sortstart ol#questions': 'startSortingQuestions',
    'sortupdate ol#questions': 'updateQuestions'
},
startSortingQuestions: function(event, ui) {
    this.beforeIndex = ui.item.index();
},
updateQuestions: function(event, ui) {
    var before = this.beforeIndex,
        after = ui.item.index();

    // now that you have the index change, all you have to do is set the new index
    // and save them to the database
    this.collection.at(before).set({ index: after; }).save();
    this.collection.at(after).set({ index: before; }).save();

    // passing silent: true because sort invokes the reset event,
    // and we don't need to redraw anything
    this.collection.sort({ silent: true });

    /* or maybe an even better approach: 
    var beforeModel = this.collection.at(before);
    var toSwapModel = this.collection.at(after);

    this.collection.remove(beforeModel);
    this.collection.remove(toSwapModel);
    this.collection.add(beforeModel, { at: after, silent: true });
    this.collection.add(toSwapModel, { at: before, silent: true });

    note that I have no idea on how your database is structured, so my guess is
    every question has it's index so you know it's order
    therefore, you should still update the model's index field or whatever it is you're doing
    */
}