Updating component from service attibutes

@Joshua_Jenkins wrote:

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.

Posts: 1

Participants: 1

Read full topic