Question

我尝试向群组添加权限，并且我设置了拖放功能，以便用户可以将未选择的权限拉到选定权限，反之亦然。通过从所有权限中删除所选权限来计算未选择的权限。这段代码都运行正常。用户第一次打开页面时，只有未选中的权限才会显示在未选中的一方，而选择的权限则相同。

但是，当用户选择要查看的其他组时，所选侧是正确的，而未选择侧则显示最后一组显示的内容。这是路线和控制器：

App.GroupsEditRoute = Ember.Route.extend({
  setupController: function(controller, model) {
    this._super(controller, model);
    controller.set('allPermissions', this.store.find('permission'));
  },
  actions: {
    'update': function(group){
      var route = this;
      group.save().then(function(){
        route.transitionTo('groups');
      });
    },
    'cancel': function(group){
      group.rollback();
      this.transitionTo('groups');
    },
    'delete': function(group){
      group.destroyRecord();
      this.transitionTo('groups');
    }
  }
});

App.GroupsEditController = Ember.ObjectController.extend({
  unselectedPermissions: function() {
    console.log('UNSELECTED');
    var allPermissions=this.get('allPermissions');
    var permissions=this.get('permissions');
    var self=this;

    allPermissions.then( function() {
      permissions.then( function() {
        var unselected=allPermissions.filter(function(permission) {
          return !permissions.contains(permission);
        });
        unselected=Ember.ArrayProxy.createWithMixins(Ember.SortableMixin, {
          sortProperties: ['name'],
          content: unselected
        });
        self.set('unselectedPermissions',unselected);
      });
    });
  }.property('model.unselectedPermissions'),
  selectedPermissions: function() {
    console.log('SELECTED');
    return Ember.ArrayProxy.createWithMixins(Ember.SortableMixin, {
      sortProperties: ['name'],
      content: this.get('permissions')
    });
  }.property('model.selectedPermissions')
});

当我通过{{#each}}在我的视图中使用unselectedPermissions时，它只触发一次。之后我从未在我的日志中看到UNSELECTED。但是，以相同方式使用的SELECTED每次都会触发。当然，除非我刷新，否则页面上显示的数据也不会更新。

每次显示页面时都会调用setupController，就像它应该的那样。

我不确定我做错了什么。

有什么想法吗？

Answer 1

通常不应设置计算属性。设置它们时，会破坏代码的计算属性部分。有几种不同的方法来处理这个问题，最简单的方法是使用观察者而不是计算属性并设置属性。

unselectedPermissionList: [],
unselectedWatcher: function() {
    console.log('UNSELECTED');
    var allPermissions=this.get('allPermissions');
    var permissions=this.get('permissions');
    var self=this;

    allPermissions.then( function() {
      permissions.then( function() {
        var unselected=allPermissions.filter(function(permission) {
          return !permissions.contains(permission);
        });
        unselected=Ember.ArrayProxy.createWithMixins(Ember.SortableMixin, {
          sortProperties: ['name'],
          content: unselected
        });
        self.set('unselectedPermissionList',unselected);
      });
    });
  }.observes('selectedPermissions')

另一种方法是返回一个数组引用，然后在事后将对象推送到该数组中。

unselectedWatcher: function() {
    console.log('UNSELECTED');
    var allPermissions=this.get('allPermissions'),
        permissions=this.get('permissions'),
        self=this,
        ret = [];

    allPermissions.then( function() {
      permissions.then( function() {
        var unselected=allPermissions.filter(function(permission) {
          return !permissions.contains(permission);
        });
        unselected=Ember.ArrayProxy.createWithMixins(Ember.SortableMixin, {
          sortProperties: ['name'],
          content: unselected
        });
        unselected.forEach(function(item){
          ret.pushObject(item);
        });
      });
    });

    return ret;
  }.property('selectedPermissions')

此外，您的两个属性声称彼此依赖，这应该触发无限循环的属性更新（更改，b是脏的，b更新，a是脏等）。

我不确定为什么selectedPermissions是一个计算属性，看起来它只是一个添加或删除的列表，而unselectedPermissions只是allPermisions而不是selectedPermissions

Ember.js控制器，其计算属性未被重新计算

1 个答案: