Ember 2，仅在一个计算属性中处理两个或多个属性。如何按搜索文本和类别进行过滤

Posted 2023-02-23

【中文标题】Ember 2，仅在一个计算属性中处理两个或多个属性。如何按搜索文本和类别进行过滤

【英文标题】：Ember 2, Handle two or more properties in just one computed property. How to filter by search text and category

【发布时间】：2017-08-12 14:13:22

【问题描述】：

我的代码在这里：

https://ember-twiddle.com/b894cec64a1d78a71e15b642d512cfcf

我需要在 Category 和 Search 中使用这个计算属性：“postsFiltered”，但是当我在 clickCategory() 上更改类别时，我需要重置搜索文本（如果存在）。

但是计算属性已经被调用了？没有？

当我搜索需要将类别重置为空的内容时也是如此。

postsFiltered: Ember.computed('category', 'search', function () 

var posts = this.get('posts');
var search = this.get('search');

console.log('computed postsFiltered() with category: ' + this.get('category') + ', search: ' + search);
return posts.filter((item) => item['categoryId'] === this.get('category'));

// or this when I search, but I don't know how to do one or the other:
// return posts.filter((item) => item['name'].includes(search));
)

如何处理同一个计算属性中的两个属性？

【参考方案1】：

您需要在控制器中引入search:'',，并将其传递给帖子组件my-posts posts=posts category=category search=search，并且您的clickCategory 应该在点击类别时重置搜索属性

clickCategory(categoryId) 
   this.set('category', categoryId);
   this.set('search','');

这将确保您遵循 Data Down Actions Up 策略。 twiddle

编辑：

Ember.computed.filterBy 这里最后一个参数是一个值而不是属性名 Ember.computed.filter 我们也不能使用它，因为我们还需要再包含一个依赖项category 所以最终实现了我们自己的计算属性，而不是内置宏，

categoryPosts: Ember.computed('posts.[]','category', function() return this.get('posts').filter(post => post.categoryId === this.get('category')); ),

【讨论】：

亲爱的@kumkanillam，感谢您的回答。另一个人向我推荐了这个：discuss.emberjs.com/t/… 你怎么看？

结合我的和讨论帖输入，我想你可以得到你想要的，看看这个twiddle。

在你最后的游戏中 (ember-twiddle.com/efc7d4256c64714cee8ea259699bdf2c) 类别点击不显示帖子。

看看这个更新的 twiddle 修复了 ember-twiddle.com/… 我更新了答案中的原因

在您的情况下，这不是必需的，当我们从数组中添加/删除条目时这将很有用，它将再次触发计算属性计算。这里解释得很好guides.emberjs.com/v2.12.0/object-model/…