从查询参数中按值过滤数组

Question

我有一个帖子列表，我需要按 social_network 进行过滤，我正在使用查询参数进行过滤，我的问题是如何临时过滤模型以便稍后我可以回来显示所有

路线 posts.index 具有：

model(params) {
    return this.store.find('post');
  }

还有一个 控制器：

export default Ember.ArrayController.extend({
  queryParams: ['social_network'],
  social_network: 'all',

  paramsDidChange: function() {
    var network = this.get('social_network');
    var posts = this.get('model');

    if(network === 'all') {
      return posts;
    }
    return posts.filterBy('social_network', network);
  }.observes('social_network', 'model'),
});

查看

{{#each post in model}}
    <li>
      {{post-index post=post}}
    </li>
  {{/each}}

Answer 1

而不是使用观察者 - 只需在控制器中使用计算的属性并在模板中循环计算的属性。

您在控制器中计算出的属性将如下所示：

filteredStuff: function() {
  var network = this.get('social_network');
  var posts = this.get('model');

  if(network === 'all') {
    return posts;
  }

  return posts.filterBy('social_network', network);
}.property('social_network')

然后，在您的模板中：

<script type="text/x-handlebars" data-template-name="index">
  <ul>
  {{#each item in filteredStuff}}
    <li>{{item.title}}</li>
  {{/each}}
  </ul>
</script>

工作解决方案here

Answer 2

现在建议使用 computed properties 来实现此功能。 .property 和 .observes 都被弃用了。

我已将 Ember 文档中的示例调整为您问题的答案。

import Controller from '@ember/controller';
import { computed } from '@ember/object';

export default Controller.extend({
  queryParams: ['socialNetwork'],
  socialNetwork: null,

  filteredPosts: computed('socialNetwork', 'model', function() {
    const socialNetwork = this.get('socialNetwork');
    const posts = this.get('model');

    if (category) {
      return posts('socialNetwork', socialNetwork);
    } else {
      return posts;
    }
  })
});

在模板中，您将使用 filteredPosts 属性。例如

{{#each post in filteredPosts}}
  <li>
    {{post-index post=post}}
  </li>
{{/each}}

有关详细信息，请参阅 Specifying Query Parameters in Ember 上的官方文档。

从查询参数中按值过滤数组

Filter array by value from query params

ember.js