2016-03-27 8 views
0

私はreact-varを使用しています。現在、以下のイベントはクリックされたときに非表示のdivを表示して非表示にします。いくつかのオプションがあるので、以下のイベントを変更して開いているdivを非表示にして、クリックしたものだけを表示したいと思います。どのように私はそれを書くだろうか?開いている要素をすべて閉じる

パス:templates.html

<template name="jobOfferLayout"> 
     {{#each jobOffers}} 

     {{> jobOfferCard}} 

     {{/each}} 
    </template> 

<template name="jobOfferCard"> 

    <div class="list-group"> 
     <a class="list-group-item smallInfo"> 
      <h4 class="list-group-item-heading">{{jobs}}</h4> 
     </a> 
    </div> 

    {{#if showFullContent}} 
     <div class="bigInfo"> 
     Show big info 
     </div> 

    {{/if}} 

</template> 

はパス:jobOfferCard.js

Template.jobOfferCard.onCreated(function(){ 
    this.showFullContent = new ReactiveVar(false); 
}); 


Template.jobOfferCard.helpers({ 
    showFullContent: function(){ 
     return Template.instance().showFullContent.get(); 
    }, 
}); 

Template.jobOfferCard.events({ 
    "click .smallInfo": function(event, template){ 
    template.showFullContent.set(!template.showFullContent.get()); 
    }, 
}); 
+0

は、あなたがやりたい、実際にどのような詳細情報を提供してくださいできますか? –

+0

を隠す/表示するために炎を使用することができます

UPDATE

Template.jobOfferCard.onCreated(function(){ Session.setDefault('job-offer-card-opened', false); }); Template.jobOfferCard.helpers({ showFullContent: function(){ return Session.get('job-offer-card-opened') === this._id; }, }); Template.jobOfferCard.events({ "click .smallInfo": function(event, template){ Session.set('job-offer-card-opened', this._id); }, }); 

+0

私は上記の情報を追加しました。ジョブのリストがあり、各ジョブにはジョブカードがあります。現在、ジョブをクリックすると、リンクされているカードが開きます。私が抱えている問題は、複数のジョブをクリックして複数のカードを開いてしまった場合です。私は新しい仕事が開いているときにカードを閉じたい。 – bp123

答えて

1

あなたの仕事のオファーカードは_idのような一意のIDを持っている場合は、あなたの代わりにtrueかを保存するのでReactiveVar内のIDを保存することができますこのようなfalseは、

Template.jobOfferCard.onCreated(function(){ 
    this.showFullContent = new ReactiveVar(false); 
}); 


Template.jobOfferCard.helpers({ 
    showFullContent: function(){ 
     return Template.instance().showFullContent.get() === this._id; 
    }, 
}); 

Template.jobOfferCard.events({ 
    "click .smallInfo": function(event, template){ 
     template.showFullContent.set(this._id); 
    }, 
}); 
あなたはヘルパー関数を使用して
+0

ありがとう、私はちょっと疲れましたが、開かれているジョブカードを閉じることはできません。何か不足していますか? – bp123

+0

@ bp123それぞれの 'jobOfferCard'に' _id'がありますか?あなたは 'showFullContent'ヘルパーと' click .smallInfo'イベントに 'console.log(this._id)'を入れて、どちらが返ってくるのか教えてください。 – Kishor

+0

YB2YRGwtdc5YsRZr8とSa69oM9vw73o2t6Wg – bp123

関連する問題