ember.js - 在 jquery UI 更新上设置对象属性

Question

在对我的最后一个问题做出如此迅速的回应后，我想我会再试试运气:o)

我正在使用可排序的 jQuery UI 对 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() 所做的更改

再次感谢。我认为这可能是很多人在某个时候想要答案的原因:)

Answer 1

您需要浏览视图。您可以循环调用您的 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>

或者一个看起来更轻的版本：

<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>