2016-03-27 2 views
0

Я использую реактивный-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

можете ли вы предоставить более подробную информацию, что на самом деле вы хотите сделать? –

+0

Хорошо, я включил дополнительную информацию выше. Существует список заданий, каждая работа имеет карточку работы. В настоящее время, когда вы нажимаете на задание, открывается карта, с которой она связана. Проблема, с которой я столкнулась, заключается в том, что если вы нажмете на несколько заданий, в результате вы откроете несколько открываемых карт. Я хочу, чтобы карточки закрывались при открытии нового задания. – bp123

ответ

1

Если ваша работа предлагают карты имеют уникальный идентификатор, как _id, то вы можете сохранить идентификатор внутри ReactiveVar вместо сохранения true или 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); 
    }, 
}); 

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

+0

@ bp123 У вас есть '_id' для каждой' jobOfferCard'? Можете ли вы поставить 'console.log (this._id)' в помощнике showFullContent' и в событии 'click .smallInfo' и сообщить мне, что они оба возвращают. – Kishor

+0

YB2YRGwtdc5YsRZr8 и Sa69oM9vw73o2t6Wg – bp123

Смежные вопросы