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

Javascript ember.js-在jquery UI更新上设置对象属性,javascript,ember.js,Javascript,Ember.js,在对我的最后一个问题做出如此迅速的回答之后,我想我应该用另一个问题来试试运气:o) 我正在使用jQueryUISortable对余烬视图进行排序。视图中的每个项目也是一个视图(类似于摘要) 我在这里向didInsertElement的父视图添加sortable <script type="text/x-handlebars"> App.SimpleRowListView = Em.View.extend({ didInsertElement: function() {

在对我的最后一个问题做出如此迅速的回答之后,我想我应该用另一个问题来试试运气:o)

我正在使用jQueryUISortable对余烬视图进行排序。视图中的每个项目也是一个视图(类似于摘要)

我在这里向didInsertElement的父视图添加sortable

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

App.SimpleRowListView=Em.View.extend({
didInsertElement:函数(){
这个。$()。可排序({
句柄:'.dragger',
项目:'.simple行',
轴:‘y’,
更新:功能(事件、用户界面){
//更新可能是最好的活动。。。
}
});
},
});
每当更新列表时,我都希望将simpleRow.listPosition值更新为其父元素中每个.simple行的当前索引

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

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

updateListPosition:函数(){
var index=$('#简单行包装器.simple row').index(this.$());
this.getPath('content').set('listPosition',index);
},
为了达到这个目的,我将连接我的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>

App.SimpleRowListView=Em.View.extend({
didInsertElement:函数(){
var self=这个;
这个。$()。可排序({
句柄:'.dragger',
项目:'.simple行',
轴:‘y’,
更新:功能(事件、用户界面){
var rows=self.$('.simple row').toArray();
rows.forEach(函数(行){
var view=Ember.view.views[$(行).attr('id');
view.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, 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>

App.SimpleRowListView=Em.View.extend({
didInsertElement:函数(){
var self=这个;
这个。$()。可排序({
句柄:'.dragger',
项目:'.simple行',
轴:‘y’,
更新:功能(事件、用户界面){
var rows=self.$('.simple row').toArray();
rows.forEach(函数(行、位置){
var view=Ember.view.views[$(行).attr('id');
视图。更新位置(位置);
//在此处传递forEach提供的新位置,并使用它,而不是再次计算
});
}
});
},
});

我只是想让你知道,我没有测试它,它应该可以工作,我是在我的todos应用程序上做的()