Question

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

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

假设我正在建立一个销售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不应该是可选择的选项。

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

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

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

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

我发现了很多简单的'Hello World'过滤示例。现在，我在解决方案的体系结构方面遇到了麻烦，迷失在Ember的实体中（Model，Route，Controller，View，...）和他们如何互动。

如果设置了这些选项中的任何一个，如何从此控制器（或其他地方）过滤color，size，shirt和pants的所有显示记录/复位？

Answer 1

您应该将控制器与need一起使用。我建议创建两个控制器

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

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

现在第二个将是常规List控制器让我们说ShopListing。在这里，您可以使用类似的东西来引用侧边栏过滤器和Live绑定。

当您在补充工具栏控制器中更改它们时，

会自动绑定此控制器中的更新（通过某些过滤器选择/取消选择）

    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

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

1 个答案: