How to update a model's order attribute when a list is being sorted in Backbone?

Question

I have a sortable list (I didn't use jqueryui sortable, I wrote a small one all by myself) in Backbone.js app. For every list item, it's Backbone model has an order attribute which keeps its order in the list. Every time I sort this list, I want to change this order attribute for every list item that has changed position. But the problem is, I don't know how to detect the sort action. Maybe it's easy to detect this action in the item model that is being dragged, but as other items' positions will be affected as this item moves, how to detect the sort action in these item models and subsequently, change the order attribute of them?

Answer 1

When you change the position of an item in the list (by dragging, or however), does an event fire that you can bind to? If nothing else, if you're dragging them perhaps you could bind to mouseup. Are the models in a collection? Or can you get to your Backbone view objects from the DOM elements?

Perhaps something like this. This assumes that you've stored the Backbone view object in a view_object property using jQuery.data, and that you've passed the corresponding model to the view constructor as the model property of the options object.

var Item_View = Backbone.View.extend( {

  initialize : function ( options ) {

    this.$el.data( 'view_object', this );

  },

  events : {

    "mouseup" : function () {

      $( "#items .item" ).each( function ( index ) {

        $( this ).data( 'view_object' ).model.set( 'order', index );

      } );

    }
    // "mouseup"

  }
  // events

} );


var model = new Item_Model( {} );

var view = new Item_View( {

  model : model

} );