javascript - 如何在 Ember 应用程序中实现嵌套全局过滤器？

Question

感谢您针对这种情况提供的任何帮助...

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

假设我正在建立一家销售衬衫和裤子的商店。这些可以通过颜色和尺寸进行过滤。

ShopRoute 加载 color 和 size 的模型。

路线:/商店/衬衫/shop/裤子

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

侧面的过滤器是单选按钮；即一次只能选择一种颜色，一次只能选择一种尺寸。

假设我在 /shop/shirts，并且选择绿色。目前，在 x 件绿色衬衫中，唯一可用的尺码是 M 和 L。应过滤 size，并且 S 不应再成为 optional 。

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

需要明确的是:反之亦然。如果在选择颜色之前选择尺寸，则应过滤颜色以反射(reflect)颜色的可用性那个大小。

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

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

我发现了很多简单的“Hello World”过滤示例。现在，我主要在解决方案的架构方面遇到麻烦，迷失在 Ember 的实体中(Model、Route、Controller、 >查看，...)以及它们如何交互。

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

Answer 1

您应该使用 need 的 Controller 。我建议创建两个 Controller

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

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

现在第二个是常规列表 Controller ，比如说 ShopListing。在这里，您可以使用类似这样的内容来引用带有实时绑定(bind)的侧边栏过滤器。

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

    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
      })

    })

希望能给你一些帮助:)

另请查看Bindings