Ember 2 - ein-/ausblenden Inhaltskomponente

Question

ich eine Komponente app/components/haben Angebots 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); 
     } 
    } 
    } 
}); 

und seine Vorlage app/templates/components/Angebot-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> 

die in app/templates/index.hbs wiedergegeben wird:

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

Das Beispiel funktioniert gut, aber ich würde gerne alle "mehr" Inhalt ausblenden, wenn ein neues angezeigt wird.

Answer 1

Eine Arbeitslösung hierfür finden Sie hier: Using Ember component's methods inside template

Grundsätzlich entweder Sie halten einen Verweis auf das ausgewählte Element in Ihrem Controller und übergeben es an jedem Ihrer offer-listing Komponenten. Auf diese Weise könnten sie sich mit diesem Hinweis auf Bekannte vergleichen, wenn sie angezeigt werden müssen oder nicht.

Oder Sie setzen eine Flagge in jedem Ihrer offer Modell je nachdem, ob angezeigt werden muss oder nicht.