Question

给定一个产品列表页面，其中包含一些无法一起使用的过滤器（query，status，page，perPage）：

当用户撰写query时，应清除status过滤器，并将page设置为1.
当用户选择status过滤器时，应清除query过滤器，并将page设置为1.
当用户更改perPage时，page设置为1（其他过滤器保持原样）
当用户更改page时，过滤器保持不变。

以下是我尝试实施的方法：

App.ProductsController = Ember.ArrayController.extend({
  query: null,
  status: null,
  page: 1,
  perPage: 15,

  queryDidChange: function() {
    this.setProperties({
      status: null,
      page: 1
    });
  }.observes('query'),

  statusDidChange: function() {
    this.setProperties({
      query: null,
      page: 1
    });
  }.observes('status'),

  perPageDidChange: function() {
    this.set('page', 1);
  }.observes('perPage'),

  parametersDidChange: function() {
    this.send('reloadModel');
  }.observes('query', 'status', 'page', 'perPage'),

  actions: {
    reloadModel: function() {
      // code omitted which makes API call using all filters set
    }
  }
});

但是当query更改时，会调用queryDidChange观察者，从而清除status。当status发生变化时，会调用statusDidChange观察者，这会清除query等。

这种解决方案可能不是最好的，但我想保持“Ember方式”来做到这一点，并且只使用公共API（例如，不是_suspendObservers）。

我怎么能实现这个目标？也许在某处使用run loop？

修改

另请注意，我知道视图可以发送操作而不仅仅是更改属性，因此控制器将如下所示：

 App.ProductsController = Ember.ArrayController.extend({
   actions: {
     queryDidChange: function() {
       this.setProperties({
         status: null,
         page: 1
       });
       this.send('reloadModel');
     },
     // code omitted
   }
 });

但是这个解决方案似乎有点冗长，并且不使用观察者＆amp;结合力，所以我希望有一种方法可以做得更好。

Answer 1

我不知道如何在Ember中暂停观察者，但你可以在观察者函数中使用条件来实现这一点

queryDidChange: function() {
  if(this.get('query')){
    this.setProperties({
      status: null,
      page: 1
    });
  }
}.observes('query'),

statusDidChange: function() {
  if(this.get('status')){
    this.setProperties({
      query: null,
      page: 1
    });
  }
}.observes('status'),

寻找一种处理过滤的Ember方式

1 个答案: