Question

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

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

重新整理整个清单
奇怪的是，当发送动作（比如点击按钮）时，它现在会触发动作两次，我不明白为什么。

最近有人处理过这种情况吗？我知道这里有一些关于这个特定主题的问题/答案，但其中大部分都已经过时了。

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

HTML5可排序和Ember.JS

1 个答案: