HTML5可排序和Ember.JS

Question

我正在尝试使用Ember.JS和这个小的jQuery + HTML5插件创建一个可排序的列表。 我面临的问题是，我的列表中的移动元素正在弄乱METAMORPH系统（我认为），导致它出现奇怪的行为。

我的解决方案是在订单更改时添加一个事件并序列化新订单，从中创建一个新列表并将其设置为我的数组的内容。 这工作，重新整理整个列表，但是

1. 重新整理整个清单很重要
2. 奇怪的是，当发送一个动作（比如点击一个按钮）时，它现在会触发两次动作，我不知道为什么。

最近有人处理过这种情况吗？ 我知道这个特定主题有一些问题/答案，但大多数都已经过时了。

Answer 1

这是我使用jQueryUi中的Sortable所做的。

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');
  }
});

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

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