如何在 Ember 应用中实现嵌套全局筛选器

How do I implement nested global filters in an Ember app?

本文关键字：嵌套 全局 筛选 实现 Ember 应用      更新时间：2023-09-26

感谢您在这种情况下提供的任何帮助...

我正在尝试构建类似于亚马逊过滤器侧边栏的功能。当选择类别的一个过滤器时，除了主要内容外，还会过滤其他过滤器类别。

假设我正在建立一家销售shirts和pants的商店。这些可以按color和size进行过滤。

ShopRoute加载color和size的模型。

路线： /shop/shirts /shop/pants 

+---------------------------------------+
| Shop                                  |
| +-----------+ +---------------------+ |
| | Filters   | |   {{outlet}}        | |
| |   Color   | |     (/shirts        | |
| |     blue  | |        or           | |
| |     red   | |      /pants)        | |
| |     green | |                     | |
| |   Size    | |                     | |
| |     S     | |                     | |
| |     M     | |                     | |
| |     L     | |                     | |
| +-----------+ |                     | |
|               |                     | |
|               |                     | |
|               +---------------------+ |
+---------------------------------------+

侧面的过滤器是单选按钮;即一次只能选择一个color，一次只能选择一个size。

假设我在/shop/shirts，我选择green 。目前，在x件绿色衬衫中，唯一可用的尺寸是 M 和 L .应过滤sizes，S不应再是可选选项。

如果我在/shop/shirts上选择了green，那么当我访问/shop/pants时，过滤器应该仍然存在，我应该只看到绿色裤子。如果所有尺寸都可用，S应重新显示为可选选项。

需要明确的是：反之亦然。如果在选择color之前选择了size，则应过滤colors以反映该size中colors的可用性。

到目前为止，我的ShopController是这样开始的：

App.ShopController = Ember.ArrayController.extend(
  colorFilter: null
  sizeFilter: null
)

我找到了很多简单的"Hello World"过滤示例。现在，我主要在解决方案的架构上遇到麻烦，迷失在Ember的实体(Model，Route，Controller，View，...(以及它们如何交互。

每当设置/重置这些选项中的任何一个时，如何从此控制器(或其他地方(过滤所有显示的color、size、shirt和pants记录？

您应该根据需要使用控制器。我建议创建两个控制器

第一个将管理过滤器/侧边栏。当用户在侧栏中选择任何过滤器时，其属性会发生变化

App.SideBarController = Ember.Controller.extend(
  selectedColor: ['Green','Blue'],
  selectedSize: ['XL'],
)

现在第二个将是常规列表控制器，让我们说购物列表。在这里，您可以使用这样的东西将侧边栏过滤器与实时绑定引用。

当您在侧边栏控制器中更改更新时，自动绑定此控制器中的更新(通过某些过滤器选择/取消选择(

    App.ShopListingController = Ember.ArrayController.extend({
      needs : ['SideBar'],
      //side bar live bound property for selected colors
      selectedColor : Ember.computed.alias('controllers.SiderBar.selectedColor'),
       //side bar live bound property for selected size
      selectedSize : Ember.computed.alias('controllers.SiderBar.selectedSize'),
      //write some code here to get only filtered result
      filteredListing : Ember.computed('model.@each','selectedSize','selectedColor',function(){
  //do some magic here
      })
    })

希望它能给你一些帮助:)

另请查看绑定

相关文章：