1

前回の質問に対する迅速な回答の後、別の質問で運試しをしようと思いました :o)

jQuery UI sortable を使用して、ember ビューをソートしています。ビュー内の各アイテムもビューです (ティーザーのように)。

ここで didInsertElement の親ビューにソート可能を追加しています。

<script type="text/x-handlebars">
  App.SimpleRowListView = Em.View.extend({
    didInsertElement: function() {
      this.$().sortable({
        handle: '.dragger',
        items: '.simple-row',
        axis: 'y',
        update: function(event, ui) {
          // update is probably the best event...
        }
     });
    },
  });
</script>

リストが更新されるたびに、 simpleRow.listPosition 値をその親要素内の各 .simple-row の現在のインデックスに更新したいと思います

各行に使用されるビューに updateListPosition 関数を追加し始めました

<script>
updateListPosition : function() {
  var index = $('#simple-row-wrapper .simple-row').index(this.$());
  this.getPath('content').set('listPosition',index);
},
</script>

目的として、UI 更新イベントを接続して、各子ビューでこれをトリガーします。

更新イベントがコントローラーの関数を呼び出して、すべてのオブジェクトをループし、listPosition を設定する必要があるかどうか、私は今迷っています。しかし、コントローラーでは this.$() にアクセスできないため、インデックスを計算できません

私の計画は、コントローラーの配列の並べ替えプロパティとして listPosition を使用することでした。ただし、.sortable() を使用して行われた変更を反映するようにコントローラー配列を並べ替えるより良い方法がある場合

再度、感謝します。これは、ある時点でかなりの数の人が答えを求めている可能性があると思います:)

4

1 に答える 1

0

ビューを通過する必要があります。updateListPosition 関数を呼び出すたびにループすることができます (これは一種の重い仕事です)、またはこのようなことを行うことができます

<script type="text/javascript">
  App.SimpleRowListView = Em.View.extend({
    didInsertElement: function() {
      var self = this;
      this.$().sortable({
        handle: '.dragger',
        items: '.simple-row',
        axis: 'y',
        update: function(event, ui) {
          var rows = self.$('.simple-row').toArray();
          rows.forEach(function(row) {
            var view = Ember.View.views[$(row).attr('id')];
            view.updateListPosition();
          });
        }
     });
    },
  });
</script>

または、少し軽く見える 1 つのバージョン:

<script type="text/javascript">
  App.SimpleRowListView = Em.View.extend({
    didInsertElement: function() {
      var self = this;
      this.$().sortable({
        handle: '.dragger',
        items: '.simple-row',
        axis: 'y',
        update: function(event, ui) {
          var rows = self.$('.simple-row').toArray();
          rows.forEach(function(row, position) {
            var view = Ember.View.views[$(row).attr('id')];
            view. updateListPosition(position);
            // pass the new position provided by forEach here and use it instead of calculating again
          });
        }
     });
    },
  });
</script>
于 2012-04-04T12:32:38.880 に答える