Question

我正在使用reactive-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());  
  },
});

Answer 1

如果您的工作机会卡片具有ReactiveVar这样的唯一ID，那么您可以将ID保存在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); }, });，< / p>

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);
    },
});

<强>更新

{{1}}

关闭所有打开的元素

1 个答案: