在jquery UI更新上设置对象属性

set object property on jquery UI update

本文关键字：设置 对象 属性 更新 jquery UI      更新时间：2023-09-26

在对我的最后一个问题做出如此迅速的回答后，我想我应该试试另一个：o）

我使用jQueryUI可排序来对成员视图进行排序。视图中的每个项目也是一个视图（类似于摘要）。

我在此处将可排序添加到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行的当前索引

我开始在用于每行的视图中添加updateListPosition函数

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

为了达到这个目的，我会连接我的UI更新事件，在每个子视图上触发它。

我现在正在考虑更新事件是否应该调用控制器上的一个函数来循环所有对象并设置listPosition。但在控制器中，我无法访问此$（），因此无法计算索引

我的计划是使用listPosition作为控制器数组的排序属性。但是，如果有更好的方法对控制器数组进行排序，使其反映使用.sortable（）所做的更改

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

您需要浏览视图。您可以循环调用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>
相关文章：