Question

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

将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来实现此功能。 {/ 1}}和.property都已被弃用。

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

.observes

在模板中，您将使用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

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

按查询参数的值过滤数组

2 个答案: