Updating component from service attibutes

1

I wanted to created a favourites list where searched items can be starred then they are added to a list.

I’m not sure how to keep everything updated in other components.

Eg.

  • Service - favourites: Contains an array with the current favourites selected and other information added by user.

  • Dropdown component: Drops down a list of the favourites where they can be removed, added a note to, clear the whole list, etc.

  • Listing: On the main page, each listing has a star that can be toggled to add to the list.

When clicking the star toggle, should I be making the active tag a computed property dependent on the array from the service?

Template:

<div class="favourite-toggle" {{action "toggleFavourite"}}>
  <FaIcon @icon="star" class={{this.isActive}} />
</div>

Component (with favourites service)

@computed('favourites.selectedArray')
get isActive() {
  return favourites.selectedArray.includes(this.listing) ? 'active' : 'inactive';
}

@action
toggleFavourite() {
  this.favouritesService.toggle(this.boat)
}

The star toggle is an action that calls a toggle function in the service that adds/removes from current list.

I’m getting confused at how the bindings should be set up so changes in the service update the components.

2

The direct answer is @computed('favourites.selectedArray.[]') as this will update the CP when the array is mutated. Without the .[] it would only register an update when the array itself was replaced (reference to a new array) and not when the array is mutated.

Note to accomplish the notification on mutation you have to use the KVO aware methods like pushObject, popObject, setObjects, removeObject, etc.

On a different note I think I would consider breaking things up a little differently. I would have a service which is responsible for the list of favorites (Perhaps handled via a Set) I would then have a contextual component that knows how to warp the list of things into presentation information and actions for each item. In this way I can be freed from the worry about who handles what. Here is an example: https://codesandbox.io/s/fnjg7