0

I have a component app/components/offer-listing.js: 

import Ember from 'ember';

export default Ember.Component.extend({
  isOfferShowing: false,
  actions: {
    offerShow() {
      if (this.get('isOfferShowing')) {
        this.set('isOfferShowing', false);
      } else {
        this.set('isOfferShowing', true);
      }
    }
  }
});

and his template app/templates/components/offer-listing.hbs:

<div class="offer__container">
  <div class="row">
    <div class="gr-3">
      <div class="offer__avatar" style="background-image: url('{{ offer.avatar }}')"></div>
    </div>
    <div class="gr-9">
      <div class="offer__name" {{action "offerShow"}}>{{ offer.firstname }} {{ offer.lastname }}</div>
      <div class="offer__age" {{action "offerShow"}}>{{ offer.age }} ans</div>
      {{#if isOfferShowing}}
        <div class="offer__description" {{action "offerShow"}}>{{offer.description}}</div>
      {{else}}
        <div class="offer__description" {{action "offerShow"}}>{{word-limit offer.description 50}}</div>
      {{/if}}

      {{#if isOfferShowing}}
        <div class="+spacer"></div>
        <a class="offer__button"><i class="fa fa-envelope"></i> Contacter par email</a>
        <a class="offer__button"><i class="fa fa-phone"></i> Voir le numéro de téléphone</a>
      {{/if}}
    </div>
  </div>
</div>

which is rendered in app/templates/index.hbs:

{{#each model as |offerUnit|}}
  {{offer-listing offer=offerUnit}}
{{/each}}

The example is working great, however I would like to hide every "more" content when a new one is showing.

Jeremie Ges
  • 2,747
  • 3
  • 22
  • 37
  • What do you mean exactly by "hide every "more" content when a new one is showing" ? – dynamic_cast May 19 '16 at 17:22
  • https://dl.dropboxusercontent.com/u/58469525/stackoverflow/ember-show-hide.png - As you can see, when we click on the text, the call actions buttons are showing. I would like to have just one open at the time. – Jeremie Ges May 19 '16 at 17:30
  • Ok I understand better what you need. Please see my answers. – dynamic_cast May 19 '16 at 17:54

1 Answers1

2

A working solution for this is available here : Using Ember component's methods inside template

Basically, either you keep a reference to the selected element in your controller and pass it to each of your offer-listing components. This way they could compare themselves with this reference to known if they need to be displayed or not.

Or you set a flag in each of your offer model depending on whether is needs to be displayed or not.

Community
  • 1
  • 1
dynamic_cast
  • 1,075
  • 1
  • 9
  • 23
  • In your opinion, what will be the best solution ? – Jeremie Ges May 19 '16 at 18:03
  • I personally like the second one because it keeps my templates clean. – dynamic_cast May 20 '16 at 08:04
  • So at the end, I came up with a model value ```offer.isShowing```, I inject in my component the Store service, when we click on an offer, I loop each objects from the local store (peekAll), I set them to false and I set the current one clicked to true. Sounds right to you ? – Jeremie Ges May 20 '16 at 12:10
  • Yes, but you could save some computation by just saving a reference to the currently selected `offer` so that you could just switch its `isShowing` property on and off instead of peeking all your data everytime. – dynamic_cast May 22 '16 at 15:06