5

@ghemtonのsafeCloneメソッドEmber.js+jQuery UI Draggable Cloneのおかげで、Ember.jsでjQueryUISortableを機能させることができました。

並べ替えが完了すると、Emberに変更を通知するのに問題があります。現在、コレクション内のアイテムを適切な場所に移動するために、ある配列位置から別の配列位置に配列要素を移動するspliceで提案されているように使用しています。それは問題なく動作しますが、ウィンドウのスクロールに問題があります。

このjsfiddle、http： //jsfiddle.net/chrisconley/g4aE6/では、一番下までスクロールしてから要素のいずれかを並べ替えると、ウィンドウが一番上に戻ります。との間にブレークポイントを設定するpropertyWillChangeとpropertyDidChange、Emberがビューからすべてのアイテムを一時的に削除していることがわかります。これにより、ウィンドウが一番上に戻ります。

App.MySortableView = Em.CollectionView.extend({
  moveItem: function(fromIndex, toIndex){
    var items = this.get('content');
    this.propertyWillChange('content');
    item = items.splice(fromIndex, 1)[0];
    items.splice(toIndex, 0, item);
    this.propertyDidChange('content');
  }
});

コレクション全体を削除して置き換えることなく、変更をEmberに通知する方法はありますか？

更新されたソリューション：

（以下のクリストファー・スワジーの回答に感謝します）

App.MySortableView = Em.CollectionView.extend({
  moveItem: function(fromIndex, toIndex){
    var items = this.get('content');
    item = items.objectAt(fromIndex);
    items.removeAt(fromIndex);
    items.insertAt(toIndex, item);
  }
});

ここでの完全な例：http：//jsfiddle.net/chrisconley/NN35P/

4

1 に答える 1

4

ArrayなどのオブジェクトでJS標準ライブラリ呼び出しを使用しないでください。これらの呼び出しは、Emberのバインディング/オブザーバーによってトラップできません。代わりに、「replace」、「objectAt」など、Emberによって定義されたAPIを使用して配列を操作します。

この場合、＃spliceを#replaceと交換する必要があります。

于 2012-04-25T14:00:36.760 に答える