jquery - 如何将 JQuery 可排序/拖放与模型同步？

Question

我想知道实现 JQuery 可排序和拖放的推荐方法是什么。我想我可以使用更新事件来更新模型：

var options = {
placeholder: "ui-state-highlight",
update: function (event, ui) {
         // update the model
    } ,
$("#sortable").sortable(options);

但这会重新触发 dom 的更新。Ember 插入的特殊脚本标签又如何呢？

我想实现的可以在这里看到：

http://minitrello.meteor.com/

问候罗杰

Answer 1

我做了这个，它将 ArrayController 的顺序绑定到 View ：

Ember.SortableView = Em.CollectionView.extend({
  tagName: "ul",
  moveItem: function(fromIndex, toIndex){
    var items = this.get('content');
    var item = items.objectAt(fromIndex);
    items.removeAt(fromIndex);
    items.insertAt(toIndex, item);
  },
  didInsertElement: function() {
    var view = this;
    view.$().sortable({
      cursor: "move",
      start: function(event, ui) {
        ui.item.previousIndex = ui.item.index();                      
      },
      stop: function(event, ui) {
        view.moveItem(ui.item.previousIndex, ui.item.index());
      }
    });
  },
  willDestroyElement: function() {
    this.$().sortable('destroy');
  }
});

像这样使用它：

{{#collection "Ember.SortableView" contentBinding="items"}}
  template of an item
{{/collection}}