0

我正在尝试向组添加权限，并且我进行了拖放设置，以便用户可以将未选择的权限拉到选定的权限，反之亦然。未选择的权限是通过从所有权限中删除选定的权限来计算的。这段代码一切正常。用户第一次打开页面时，只有那些未被选中的权限才会出现在未选中的一侧，选中的也是如此。

但是，当用户选择另一个组来查看时，选择的一侧是正确的，而未选择的一侧显示了最后一组显示的内容。这是路由和控制器：

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，因为它应该。

我不确定我做错了什么。

有任何想法吗？

4

1 回答 1

0

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

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

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

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

于 2014-05-30T00:50:39.970 回答