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}}

这个例子运作得很好，但是我希望在显示新内容时隐藏每个＆＃34;更多＆＃34; 内容。

Answer 1

此处提供了一个有效的解决方案：Using Ember component's methods inside template

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

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

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

1 个答案: