1

いくつかのフィルター ( query、status、page、perPage) が一緒に機能しない商品リスト ページがあるとします。

  • ユーザーが を書き込むqueryと、statusフィルターがクリアされ、page1 に設定されます。
  • ユーザーがフィルターを選択するstatusと、queryフィルターがクリアされ、page1 に設定されます。
  • ユーザーが を変更する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)。

どうすればこれを達成できますか? おそらくどこかで実行ループを使用していますか？

編集

また、ビューがプロパティを変更するだけでなくアクションを送信できることもわかっているため、コントローラーは次のようになります。

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

しかし、この解決策は少し冗長に見え、オブザーバーとバインディングの力を使用していないため、これをより適切に行う方法があることを願っています。

4

1 に答える 1