Ember 2 - 隐藏/显示内容组件

Question

我有一个组件 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);
      }
    }
  }
});

和他的模板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>

在app/templates/index.hbs中呈现：

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

该示例运行良好，但是我想在显示新内容时隐藏所有 "more" 内容。

Answer 1

这里提供了一个可行的解决方案：

基本上，您可以在控制器中保留对所选元素的引用并将其传递给每个 offer-listing 组件。这样他们就可以将自己与此引用进行比较，以确定是否需要显示。

或者您在每个 offer 模型中设置一个标志，具体取决于是否需要显示。

Ember 2 - 隐藏/显示内容组件

Ember 2 - Hide / show content component

ember.js

ember-cli

ember.js-2