A little filtering help needed

Ember CLI
1

I’m struggling to figure out the best way to go about this.

I have an items route that has a component rendering an item layout in an each block.

I want to have a route called items/my-bids that shows the same layout of the component rendering in an each block. However, on this route I want to animate items that the user is not currently bidding on away upon entering this route, and then when going back to the items route have them animate back in.

I know I should be able to do these animations all on the my-bids route when the template has rendered and just before it’s about to transition away.

The event items that are rendering via the component have a computed property class binding on them to indicate if the logged in user has bid on that item in the past. So I should be able to target those that the user has not bid on (those without the class) and animate those in or out depending on the action taking place (arriving at the my-bids route or leaving it)

One problem with this is I can’t seem to get at the event items rendered by the component after the route has finished loading.

I am trying

actions: {
  	didTransition() {
  		Ember.$('.event-item-component:not(.bidding)').addClass('animate');
  	}
  }

However that can’t seem to get at the elements, if I console log the elements it’s not selecting anything. Is there a different hook I need to listen on to be able to do this?

Maybe there is an easier way to do this?

2

Can you put it on the component’s didInsertElement instead?

import Ember from 'ember';

export default Ember.Component.extend({
  . . . .
  didInsertElement() {
    if(!this.get('isBidding')) {
      this.$().addClass('animate');
    }
  }

Or even just build an observer in the component that adds or removes the animate class based on the state of a property?

3

So following your advice. I’m setting a property filterMyBids in each route. In the items route I set the property to false, in the my-bids route I set it to true, then on the component I have an onInsert function like so

onInsert: function() {
  console.log(this.get('filterMyBids'));
  if(this.get('filterMyBids')) {
    this.$('.bidding').addClass('animate');
  }
}.on('didInsertElement')

But the console logs undefined, how do I get at those properties?

4

First a warning… I’m pretty new to Ember myself so don’t take anything I say too terribly seriously. There’s probably better ways.

However, components generally should have “data down” which, to me in this case, means that you should set the “filterMyBids” property when instantiating the component. Basically, the unfiltered version might look like:

app/templates/items/index.hbs

{{#each items as |item|}}
  {{event-item item=item filterMyBids=false}}
{{/each}}
5

Hmm yeah I liked that approach but after trying it it’s not quite going to give me the effect I’m looking for.

The css transition works when adding the class but because transitioning back to the unfiltered route re-renders the components they just pop back in

I’m trying to maybe get the “filtered” route to animate them back in before the transition but I’m having trouble making that work as well. I have a stack overflow question put out on that issue here ember.js - Halt transition until css transition is complete - Stack Overflow

Still wondering if there is a different solution to this.

6

One thought. Not sure how this fits in the bigger picture of your app, but how about getting rid of the “my-bids” route completely and handle this through a parent component “event-items-layout” or something? Then a property of the parent component could be observed to handle toggling between the “all” and the “my” views.

7

For now so that this doesn’t block the rest of my development, I’m going with pretty much that, so there won’t be any routing which we really would like to have but I’ll have to come back later if I figure something out.

Anyone who has an idea on how I can do this and have it route (before routable components perhaps) would be greatly appreciated!