How do I implement nested global filters in my Ember app?
Thanks for any help you can provide in this situation ...
I am trying to create functionality similar to Amazon filter sidebar. When one category filter is selected, other filter categories are filtered in addition to the main content.
Let's say I'm building a store that sells shirts
and pants
. They can be filtered as color
well as size
.
ShopRoute
loads the model for color
and for size
.
Routes:
/shop/shirts
/shop/pants
+---------------------------------------+
| Shop |
| +-----------+ +---------------------+ |
| | Filters | | {{outlet}} | |
| | Color | | (/shirts | |
| | blue | | or | |
| | red | | /pants) | |
| | green | | | |
| | Size | | | |
| | S | | | |
| | M | | | |
| | L | | | |
| +-----------+ | | |
| | | |
| | | |
| +---------------------+ |
+---------------------------------------+
Side filters are radio buttons; those. only one color
can be selected at a time, and only one size
can be selected at a time.
Let's say I am in /shop/shirts
and I choose green
. Currently, the number of T-shirts is x
available in green, only available sizes M
and are available L
. sizes
should be filtered and S
will no longer be selected.
If I choose green
on time /shop/shirts
, then when I am /shop/pants
, the filter should persist and I should only see the green pants. If all sizes are available, S
should appear as a selectable option.
To be clear: this should also work the other way around. If a color
value is selected before selection size
, colors
should be filtered to reflect availability colors
in that size
.
So far mine ShopController
starts like this:
App.ShopController = Ember.ArrayController.extend(
colorFilter: null
sizeFilter: null
)
I found many simple examples of Hello World filtering. Now I mostly have problems with the architecture of the solution, are lost in the Ember elements ( Model
, Route
, Controller
, View
, ...) and how they interact.
How can I filter out all the displayed records color
, size
, shirt
and pants
with this controller (or elsewhere), whenever you have installed any of these parameters / reset?
source to share
You should use controllers as needed . I would suggest creating two controllers
The Filters / Side panel will work first. Its property changes when the user selects any filter in the sidebar
App.SideBarController = Ember.Controller.extend(
selectedColor: ['Green','Blue'],
selectedSize: ['XL'],
)
Now the second one will be regular. The List controller allows you to scan ShopListing. Here you can reference the Live Anchored Sidebar Filter using something like this.
bind updates in this controller automatically as they change in the sidebar controller (via filter selection / selection)
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
})
})
Hope it helps you :)
Also see Bindings
source to share