Question

After such a speedy response to my last question I thought I’d try my luck with another :o)

I’m using jQuery UI sortable to sort an ember view. Each item in the view is also a view (like a teaser).

I am adding sortable to the parent view on didInsertElement here.

<script type="text/x-handlebars">
  App.SimpleRowListView = Em.View.extend({
    didInsertElement: function() {
      this.$().sortable({
        handle: '.dragger',
        items: '.simple-row',
        axis: 'y',
        update: function(event, ui) {
          // update is probably the best event...
        }
     });
    },
  });
</script>

Whenever the list is updated I’d like to update my simpleRow.listPosition value to the current index of each .simple-row within it’s parent element

I started adding an updateListPosition function to the view used for each row

<script>
updateListPosition : function() {
  var index = $('#simple-row-wrapper .simple-row').index(this.$());
  this.getPath('content').set('listPosition',index);
},
</script>

With the aim I’d connect my UI update event to trigger this on each of the child views.

I’m now wandering whether the update event should call a function on the controller to loop over all objects and set the listPosition. But in the controller I cannot access this.$() and so can’t calculate the index

My plan was to use listPosition as a sorting property on the controller’s array. But if there are better ways of sorting the controller array so that it reflects the changes made using .sortable()

Thanks again. I think this might be one quite a few people will want an answer for at some point 🙂

Answer 1

You need to go through the views. You can either loop each calling your updateListPosition function (which is kind of a heavy job) or you can do something like this

<script type="text/javascript">
  App.SimpleRowListView = Em.View.extend({
    didInsertElement: function() {
      var self = this;
      this.$().sortable({
        handle: '.dragger',
        items: '.simple-row',
        axis: 'y',
        update: function(event, ui) {
          var rows = self.$('.simple-row').toArray();
          rows.forEach(function(row) {
            var view = Ember.View.views[$(row).attr('id')];
            view.updateListPosition();
          });
        }
     });
    },
  });
</script>

Or one version that seems a little lighter:

<script type="text/javascript">
  App.SimpleRowListView = Em.View.extend({
    didInsertElement: function() {
      var self = this;
      this.$().sortable({
        handle: '.dragger',
        items: '.simple-row',
        axis: 'y',
        update: function(event, ui) {
          var rows = self.$('.simple-row').toArray();
          rows.forEach(function(row, position) {
            var view = Ember.View.views[$(row).attr('id')];
            view. updateListPosition(position);
            // pass the new position provided by forEach here and use it instead of calculating again
          });
        }
     });
    },
  });
</script>