Route that observes property on component that links to it

Question

I have a list if items in an items route that uses a component event-item to display each of them. This component has two computed's on it that are setting some classes right now to show the user some info about each item...

classNameBindings: ['winning','closed'],
item: null,
winning: Ember.computed('item.item_high_bid_user_id','userService.user_id',function(){
    return this.get('item.item_high_bid_user_id') == this.get('userService.user_id');
}),
closed: Ember.computed('item.item_status',function(){
    return this.get('item.item_status') === 2;
})

In the component template each item in the list is wrapped in a link-to that links to the item route, which displays a single item.

In the item template and even route I would like to observe the winning and closed computed's that are on the corresponding component to show or hide some things in the item template (IE. hid the bidding section if an item is closed, etc.)

What would be the proper way to do this?

BTW I'm on Ember 2.2.0 Ember Data 2.2.0 and Ember-cli 1.13.13

score 0 · Accepted Answer · edited May 23 '17 at 12:30

If your event-item component is linking to an item route, I assume you're passing the item model into the link-to helper, which means all the attributes needed to compute these properties are still going to be available in the item controller.

// templates/whichever-template-holds-items.hbs
{{#each items as |item|}}
  {{event-item model=item}}
{{/each}}


// templates/components/event-item.hbs
<div>
  {{link-to 'item' model}} // pass model to item route
</div>


// controllers/item.js
import Ember from 'ember';

export default Ember.Controller.extend({
  // include userService

  winning: Ember.computed.equal('model.item_high_bid_user_id','userService.user_id'),
  closed: Ember.computed.equal('model.item_status', 2)
});


// templates/item.hbs
{{#if winning}}
  // show winning stuff
{{/if}}

{{#if closed}}
  // show closed stuff
{{/if}}

Also, I noticed you had a mix of both == and === for your conditionals in the code you posted. Most of the time you will want to use ===, see this post.

Almost forgot - Ember.computed.equal

UPDATE (in response to your comment below)

There are a couple ways to alert a controller that a value in a component has changed, but neither are really conducive in your current situation.

The first way (which is ok to do) would be to follow DDAU (data down, actions up) and send an action from your component up to your controller, but this only works if the component is inside the controller's view, which is not the case for what you're doing.

The second way (which is not really ideal IMO) would be to use a service in sort of a pub/sub fashion which would allow distant component/controllers to talk to each other (you can read more about this method here). You'll probably get mixed responses as far as doing things this way since it can be kind of disruptive to the data flow of your app. But sometimes you're choices are limited.

With all this said, I would probably stick with re-computing in the controller rather than trying to send data across your app from one controller to another. In the end it will still be less code and less work for the framework. Hope this was helpful.

I didn't know about `computed.equal` I'll switch to that, thanks for the pointer. So What you're saying here though is I will indeed have to redefine the computed's on the item controller? That's essentially what I'm doing now but that means I have the computed's in two places and I just thought maybe there were a way to cut down on the amount of duplication here. — Jordan, Dec 02 '15 at 16:51

Route that observes property on component that links to it

1 Answers1