0

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

该示例运行良好，但是我想在显示新内容时隐藏每个“更多”内容。

4

1 回答 1

2

此处提供了一个可行的解决方案：在模板中使用 Ember 组件的方法

基本上，您要么在控制器中保留对所选元素的引用，然后将其传递给每个offer-listing组件。通过这种方式，他们可以将自己与此参考进行比较，以了解是否需要显示它们。

或者您offer根据是否需要显示在每个模型中设置一个标志。

于 2016-05-19T17:53:49.440 回答