3

I'm trying to make a sortable list using Ember.JS and this small jQuery + HTML5 plugin. The problem I'm facing is that moving elements in my list is messing up with the METAMORPH system (I think), leading it to strange behaviors.

My solution was to add an event when the order changed and serialize the new order, make a new list out of it and set it as the content of my array. This works, rerendering the whole list, but

  1. rerendering the whole list is heavy
  2. strangely, when sending an action (like clicking a button) it now triggers the action twice, and I have no idea why.

Has anyone recently deal with this situation? I'm aware that there are some questions/answers on this particular subject here, but most of them are totally outdated.

4

1 回答 1

4

这是我使用SortablejQueryUi 所做的。

App.SortableView = Ember.View.extend({
  didInsertElement : function(){
    $( "#layerList" ).sortable({
      update: function(event, ui) {
        var indexes = {};
        // create a hash of layer ids and positions
        // { idX : pos1, idY : pos2, ...  }
        $(this).find('.layer').each(function(index) {
          // object id is stored in DOM in the data-id attr
          indexes[$(this).data('id')] = index;
        },this);
        // pass the hash to the controller to update the models
        controller.updateSortOrder(indexes);
      }
    });
  }
});

App.SortableController = Ember.ArrayController.extend({
  updateSortOrder: function(indexes) {
    // Let Ember know that things are about to change
    this.propertyWillChange('content');
    var layers = this.get('content');
    // Update each layer with the new position
    layers.forEach(function(item) {
      var index = indexes[item.get('id')];
      item.set('position', index);
    });
    // Let Ember know that changes are finished
    this.propertyDidChange('content');
  }
});

编辑：我今天在试图确定我的一个应用程序中的一些时髦时重新审视了这个问题。我最终组装了一个演示此功能的 jsbin。

http://jsbin.com/EZulAN/1/edit?html,js,输出

于 2013-09-06T17:16:32.223 回答